手机WEB网页二级联动

来源：互联网发布：安卓看网络小说软件编辑：程序博客网时间：2024/05/01 06:10

HTML代码

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no, email=no"><meta name="renderer" content="webkit"><title></title><link rel="stylesheet" href="css/comm.css" /><link rel="stylesheet" href="css/header-footer.css" /><link rel="stylesheet" href="css/supplier.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/pop.js"></script><script type="text/javascript" src="js/modal-list.js"></script></head><body><div class="contain"><div class="wapper header"><span class="logo"><img src="css/img/logo.png"/></span><span class="search"><input class="search-input" type="text" placeholder="Search..."/><span class="search-icon"></span></span></div><div class="content"><div class="default-address"><span class="img-span"><img src="css/img/supplier.png"/></span><span class="desc-span"><p class="c-green font-1rem">PRINCE STONE CORPORATION LIMITED</p><p><span class="icon "><img src="css/img/country.png"/></span><span>China-Fujian-Xiamen</span></p></span></div><div class="select"><ul class="clearfix"><li class="on"><a>Products</a></li><li>About Us</li></ul></div><div class="abstrac in"><div class="input-select"><span class="input"><input class="font-1rem" type="text" placeholder="Search Products" /><a class="global-icons"><i class="search-icon"></i></a></span></div><div class="dele-select"><span class="c-black font-1rem">Please select category</span><span class=" down-up-icons"></span></div><div class="modal-list"></div><div class="list-select"><div class="list-head"><ul class="clearfix"><li>All Categories</li><li>ALL</li></ul></div><div class="list-body"><div class="list-left"><ul class="clearfix"><li class="on" id="1"><span>Interior Stone</span></li><li id="2"><span>Interior Stone</span></li><li id="3"><span>Interior Stone</span></li><li id="4"><span>Interior Stone</span></li><li id="5"><span>Interior Stone</span></li><li id="6"><span>Interior Stone</span></li><li id="7"><span>Interior Stone</span></li><li id="8"><span>Interior Stone</span></li></ul></div><div class="list-right"><ul class="clearfix"><li class="in 1"><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span></li><li class="2"><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span><span>Interior Stone</span></li><li class="3"><span>Interior Stone</span></li><li class="8"><span>Interior Stone</span></li><li class="6"><span>Interior Stone</span></li></ul></div></div></div><!--<div class="right-list"></div>--><div class="list"><ul class="clearfix"><li><p class="show-img"><img src="css/img/index3-list.png" /></p><p class="show-title font-8rem">Own Quarry, New G603</p></li><li><p class="show-img"><img src="css/img/index3-list.png" /></p><p class="show-title font-8rem">Own Quarry, New G603</p></li><li><p class="show-img"><img src="css/img/index3-list.png" /></p><p class="show-title font-8rem">Own Quarry, New G603</p></li><li><p class="show-img"><img src="css/img/index3-list.png" /></p><p class="show-title font-8rem">Own Quarry, New G603</p></li><li><p class="show-img"><img src="css/img/index3-list.png" /></p><p class="show-title font-8rem">Own Quarry, New G603</p></li><li><p class="show-img"><img src="css/img/index3-list.png" /></p><p class="show-title font-8rem">Own Quarry, New G603</p></li><div class="clearfix"></div></ul></div></div><div class="abstrac "><div class="banner"><img src="css/img/supplier-company.png" /></div><div class="bussiness-desc font-9rem"><p><span class="c-gray left-span1">Business Type:</span><span class="c-black">Quarry Owner, Factory, Exporter</span></p><p><span class="c-gray left-span2">Main Products:</span><span class="c-black"> Granite,Marble,Onyx,Nano Crystalized Stone,Artificial Stone,Slate,</span></p><p><span class="c-gray left-span3">Established:</span><span class="c-black">Sep 21, 2001</span></p><p><span class="c-gray left-span4">NO. of Employees:</span><span class="c-black">5 ~ 50</span></p><p><span class="c-gray left-span5">Annual Turnover:</span><span class="c-black">US$ 4 Million</span></p></div><div class="company-desc"><div class="title font-1rem">Company Description</div><article class="article"><p class="font-8rem">Founded in 2001, Prince Stone Corporation Limited is specialized in supplying its customers with expert stoneproducts. We keep closed cooperation with project makers from all over the world and supply them with full range of products for the projects.</p><p class="load-more txt-c"><span class="font-1rem c-orange">More</span><span class="down-up-icons"></span></p></article></div><div class="company-desc detail"><div class="title font-1rem">Contact Details</div><div class="details-desc"><ul class="clearfix"><li class="head-icon"><img src="css/img/index3-list.png" alt="" /></li><li class="desc-txt font-8rem"><p><span class="font-9rem c-green">Donna Liu</span></p><p><span class="c-gray">Telephone:</span><span class="c-black">0086-592-5550265</span></p><p><span class="c-gray">Fax No:</span><span class="c-black">0086-592-5323223</span></p><p><span class="c-gray">Mobile:</span><span class="c-black">0086-13799283649</span></p><p><span class="c-gray">Company Address:</span><span class="c-black">Room 2709,NO.283 Jia Building, Changqing,Changqing RoadSimng Distruct,Xiamen, China</span></p></li><li class=""><span class="border"></span><a href="javascript:" data-modal="modal" data-toggle="phone" class="phone-icons"></a></li><div class="clearfix"></div></ul></div><div class="pop-window" id="phone"><div class="pop-modal"><div class="pop-head font-1rem">Call to confirm</div><div class="pop-foot font-1rem clearfix"><button class="btn clicked on">Yes</button><button class="btn cancle">No</button><div class="clearfix"></div></div></div></div></div></div></div><div class="wapper footer"><ul class="clearfix"><li><a class="btn">APP Download</a></li><li><a class="btn in">Touch Version</a></li><li><a class="btn">PC Version</a></li><div class="clearfix"></div></ul><p>&copy;2003-2016 Stonecontent.com</p></div></div></body></html>

$(function(){$('.dele-select').on('click',function(){$('.modal-list').toggle();$('.list-select').toggle();var $display=$('.modal-list').css('display');if($display=='block'){var a = function (e) { e.preventDefault(); }$('.contain').css('height','100%').css('overflow','hidden')$('.modal-list').bind("touchmove",function(e){                e.preventDefault();        });        $('.list-body').bind("touchmove",function(e){            e.stopPropagation();        });}})$('.modal-list').on('click',function(){$(this).toggle();$('.list-select').toggle();$('.contain').css('height','auto').css('min-height','100%').css('overflow','scroll')});$('.list-left li').on('click',function(){var $index=$(this).index();var $id=$(this).attr('id');var $indexOf=$(this).parent('ul').find('.on').index();$('.list-left li').eq($indexOf).removeClass('on');$(this).addClass('on');$('.list-right li').removeClass('in');$('.list-right li.'+$id).addClass('in');})

CSS<pre name="code" class="html">.contain{background-color: #fff;position: relative;}.footer{position: absolute;bottom: 0;}.content{width:100%;/*position: absolute;*/padding-bottom: 88px;}.default-address{width:100%;padding:10px;text-align: center;}.default-address >span{display: inline-block;vertical-align: middle;margin:-1px;}.default-address .img-span{width:40%;text-align: center;max-width: 122px;}.default-address .img-span img{width:95%;max-width: 122px;}.default-address .desc-span{width:60%;text-align: left;}.desc-span p{margin:0;width: 100%;margin-top:2px;margin-bottom: 8px;}.desc-span p span{display: inline-block;vertical-align: middle;}.select {height:33px;border-top: 1px solid #D8D6D6;}.select li{width:50%;float: left;text-align: center;line-height: 30px;font-size: 1rem;color:#606061;}.select li.on{border-bottom: 2px solid #F9641B;}.input-select{height:34px;width: 100%;padding: 4px 10px;background: #E7E6E6;}.input-select .input{display: inline-block;border-radius: 6px;height: 100%;width:100%;background: #fff;padding-left:10px;position: relative;}.input-select .input input{width:79%;height: 100%;}.global-icons{display: inline-block;position: absolute;width:10%;height:100%;background-color: #fff;right:0;border-radius: 0 6px 6px 0;}.global-icons .search-icon{display: inline-block;width:22px;height:22px;top: 1px;position: absolute;background: url(img/search-icon.png) no-repeat;background-size: 100% 100%;}.dele-select{text-align: center;height:27px;border-bottom: 2px solid #D8D6D6;line-height: 25px;}.down-up-icons{display: inline-block;height:16px;width:20px;background: url(img/down-up.png) no-repeat;background-size: 100% 100%;vertical-align: middle;margin-left: 5px;}.list {padding:0;padding-top:10px;padding-left:13px;padding-right:13px;height: auto;}.list li{width:50%;float: left;padding-left:10px;margin-bottom: 9px;}.list li:nth-child(odd){padding-right:10px;padding-left:0;}.list li p{margin:0;}.list .show-img{text-align: center;width:100%;}.list .show-img img{width:100%;}/*tab 切换*/.abstrac{display: none;}.abstrac.in{display: block;}/*about*/.banner{width:100%;padding:0px;padding:4px;border-top:2px solid #D8D6D6;}.banner img{width:100%;}.bussiness-desc{border-top: 5px solid #D8D6D6;padding:10px 20px;}.bussiness-desc p{margin:0;}.bussiness-desc span{display:table-cell;}.bussiness-desc .c-gray{}.left-span1{width:90px}.left-span2{width:95px}.company-desc{}.company-desc .title{height:29px;background: #E7E6E6;line-height: 29px;padding-left:23px;}.company-desc .article{padding:12px 23px;}.article p{margin:0;}.article .load-more{  margin-top:13px;}.load-more span{display: inline-block;cursor: pointer;}.details-desc{padding:12px 23px;}.details-desc li{float: left;width:10%;}.details-desc .head-icon{width:25%;margin-right:5%}.details-desc .desc-txt{width:60%;}.desc-txt p{margin:0}.head-icon img{width:100%;}.border{display: inline-block;border: 1px solid #D8D6D6;vertical-align: middle;margin-top:14px;height:18px;margin-right: 7px;}.phone-icons{display: inline-block;width:14px;height:15px;background: url(img/phones-icon.png) no-repeat;margin-top:14px;vertical-align: middle;}.modal-list{position: fixed;width:100%;height:100%;top:0;background: rgba(77,77,77,1);display: none;z-index: 22;}.list-select{position: fixed;bottom: 0;width:100%;background: #fff;display: none;z-index: 23;}.list-select .list-head{height: 37px;border-bottom: 2px solid #F5AC88;}.list-select .list-head li{height:37px;float: left;width:50%;text-align: center;line-height: 37px;}.list-select .list-head li:first-child{border-right: 1px solid #D8D6D6;}.list-select .list-body{width:100%;}.list-body >div{float: left;width:50%;text-align: center;}.list-body .list-left{border-right: 1px solid #D8D6D6;z-index: 2;max-height: 223px;overflow: scroll;/*position: fixed;*/}.list-body .list-right{position: relative;max-height: 223px;overflow: scroll;}.list-left li{height:33px;border-bottom: 1px solid #D8D6D6;line-height: 33px;}.list-right li{display: none;}.list-right li span{display: block;height:33px;line-height: 33px;border-bottom: 1px solid #D8D6D6;}.list-left li.on{/*display: block;*/background: #EFEFEF;}.list-right li.in{display: block;background: #EFEFEF ;}

脚本代码有些臃肿，还望各位大神给出优化建议

0 0

手机WEB网页 二级联动

手机WEB网页二级联动