wap觸屏手機網站自適應tab選項卡菜單切換



85 336 113



特效描述: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

加群請備注:從官網了解到

老夫子电子