wap触屏手机网站自适应tab选项卡菜单切换



80 318 107



特效描述:wap触屏手机网站 自适应 tab选项卡菜单切换,tab选项卡切换

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/zepto_min.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>

3. HTML代码

<div class="box-163css">
	<ul id="pagenavi1" class="page">
        <li><a href="#js011.html" class="active">新闻</a></li>
      	<li><a href="#js.html">产品</a></li>
        <li><a href="#js09.html">游戏</a></li>
        <li><a href="#js10.html">下载</a></li>
    </ul>
    <div id="slider1" class="swipe">
      <ul class="box01_list">
        <li class="li_list">
			<div class="pic_list"><img src="images/img05.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">曝湖人惊天交易:造跑轰三人组</a></p>
				<p><span class="s_arrow"></span><a href="#">金志文圈钱:婚礼被曝卖700万</a></p>
				<p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
				<p><span class="s_arrow"></span><a href="#">10时播热火|书豪遭弃用</a></p>
			</div>
		</li>
        <li class="li_list">
			<div class="pic_list"><img src="images/img06.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">日本耗1天半追千里缉捕台渔船</a></p>
				<p><span class="s_arrow"></span><a href="#">安徽检察院办大案有功获1等功</a></p>
				<p><span class="s_arrow"></span><a href="#">李庄提告重庆专案组徇私枉法</a></p>
				<p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
			</div>
		</li>
		<li class="li_list">
			<div class="pic_list"><img src="images/img07.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">警方:30韩国生在京抢劫系误会</a></p>
				<p><span class="s_arrow"></span><a href="#">沪68岁父亲杀39岁"啃老"独子</a></p>
				<p><span class="s_arrow"></span><a href="#">三亚免税店自曝大部分是假货</a></p>
				<p><span class="s_arrow"></span><a href="#">组图:跟拍情侣间的"私密"生活</a></p>
			</div>
		</li>
		<li class="li_list">
			<div class="pic_list"><img src="images/img08.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">评:日"泥鳅"首相变酗酒老宅男</a></p>
				<p><span class="s_arrow"></span><a href="#">围观:72岁翁穿女装网店当模特</a></p>
				<p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
				<p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
			</div>
		</li>
      </ul>
	  <ul class="newslist">
        <li><span class="s_arrow"></span><a href="#">产品</a></li>
        <li><span class="s_arrow"></span><img src="images/img06.jpg"><span><a href="#">产品</a><a href="#">产品</a></span></li>
		<li><span class="s_arrow"></span><img src="images/img07.jpg"><span><a href="#">产品</a><a href="#">产品</a></span></li>
		<li><span class="s_arrow"></span><img src="images/img08.jpg"><span><a href="#">产品</a><a href="#">产品</a></span></li>
      </ul>
    </div>
	<a href="http://www.163css.com/js06.html" target="_blank"  class="go_btn">进入<em class="emtitle">新闻</em></a>
</div>
<div class="box-163css">
	<ul id="pagenavi2" class="page">
        <li><a href="#http://www.lanrenmb.com/js01.html" class="active">财经</a></li>
        <li><a href="#http://www.lanrenmb.com/js02.html">股票</a></li>
        <li><a href="#http://www.lanrenmb.com/js03.html">商业</a></li>
        <li><a href="#http://www.lanrenmb.com/js04.html">房产</a></li>
    </ul>
    <div id="slider2" class="swipe">
		<ul class="box01_list">
        <li class="li_list">
			<div class="pic_list"><img src="images/img05.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">曝湖人惊天交易:造跑轰三人组</a></p>
				<p><span class="s_arrow"></span><a href="#">金志文圈钱:婚礼被曝卖700万</a></p>
				<p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
				<p><span class="s_arrow"></span><a href="#">10时播热火|书豪遭弃用</a></p>
			</div>
		</li>
        <li class="li_list">
			<div class="pic_list"><img src="images/img06.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">日本耗1天半追千里缉捕台渔船</a></p>
				<p><span class="s_arrow"></span><a href="#">安徽检察院办大案有功获1等功</a></p>
				<p><span class="s_arrow"></span><a href="#">李庄提告重庆专案组徇私枉法</a></p>
				<p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
			</div>
		</li>
		<li class="li_list">
			<div class="pic_list"><img src="images/img07.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">警方:30韩国生在京抢劫系误会</a></p>
				<p><span class="s_arrow"></span><a href="#">沪68岁父亲杀39岁"啃老"独子</a></p>
				<p><span class="s_arrow"></span><a href="#">三亚免税店自曝大部分是假货</a></p>
				<p><span class="s_arrow"></span><a href="#">组图:跟拍情侣间的"私密"生活</a></p>
			</div>
		</li>
		<li class="li_list">
			<div class="pic_list"><img src="images/img08.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
			<div class="news_list">
				<p><span class="s_arrow"></span><a href="#">评:日"泥鳅"首相变酗酒老宅男</a></p>
				<p><span class="s_arrow"></span><a href="#">围观:72岁翁穿女装网店当模特</a></p>
				<p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
				<p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
			</div>
		</li>
      </ul>
	  <ul class="newslist">
        <li><span class="s_arrow"></span><a href="#">产品</a></li>
        <li><span class="s_arrow"></span><img src="images/img06.jpg"><span><a href="#">产品</a><a href="#">产品</a></span></li>
		<li><span class="s_arrow"></span><img src="images/img07.jpg"><span><a href="#">产品</a><a href="#">产品</a></span></li>
		<li><span class="s_arrow"></span><img src="images/img08.jpg"><span><a href="#">产品</a><a href="#">产品</a></span></li>
      </ul>
    </div>
    <a href="http://www.lanrenmb.com/js06.html" target="_blank" id="go" class="go_btn">进入<em class="emtitle">财经</em></a></div>
<script type="text/javascript">
for(n=1;n<3;n++){
	var page='pagenavi'+n;
	var mslide='slider'+n;
	var mtitle='emtitle'+n;
	arrdiv = 'arrdiv' + n;
	var as=document.getElementById(page).getElementsByTagName('a');
	var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
		var as=document.getElementById(this.page).getElementsByTagName('a');
		as[this.p].className='';
		as[index].className='active';
		this.p=index;
		var txt=as[index].innerText;
		$("#"+this.page).parent().find('.emtitle').text(txt);
		var txturl=as[index].getAttribute('href');		
		var turl=txturl.split('#');
		$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);
	}});
	tt.page = page;
	tt.p = 0;
	//console.dir(tt); console.dir(tt.__proto__);
	for(var i=0;i<as.length;i++){
		(function(){
			var j=i;
			as[j].tt = tt;
			as[j].onclick=function(){
				this.tt.slide(j);
				return false;
			}
		})();
	}
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 文字滑动 文字滑块 文字切换 文字选项卡 选项卡自动切换 列表切换 翻页切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到