tab滑動特效-創(chuàng)新互聯(lián)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab滑動特效</title>
<style>
	html, body, div, span, applet, object, iframe,
	h2, h3, h4, h5, h6, h7, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center, dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before,blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	a{ text-decoration:none;}
	.clearfix { 
	  *zoom: 1; 
	} 
	.clearfix:before, 
	.clearfix:after { 
	  display: table; 
	  line-height: 0; 
	  content: ""; 
	} 
	.clearfix:after { 
	  clear: both; 
	}
	#container{ width:500px; margin:10px auto;}
	.tab-menu{ width:500px;}
	.tab-menu ul{ list-style:none;}
	.tab-menu li{ float:left; width:100px; height:30px; border:1px solid #3174b1; text-align:center; background:#5090c0; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:1px solid #5090c0;}
	.tab-menu li.selected{ float:left; width:100px; height:30px; border:1px solid #c8cdd0; text-align:center; background:#e6eaed; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:1px solid #e6eaed;}
	.tab-menu li.selected a{ color:#5090c0; line-height:30px;}
	.tab-menu li a{ color:#fff; line-height:30px;}
	.tab-content{ width:499px; overflow:hidden; border:1px solid #c8cdd0;}
	.tab-content .tab-all{ width:2000px; }
	.tab-all div{ float:left; width:498px; height:300px;}
	.white-div{ position:relative; top:-302px; left:1px; background:#fff; height:2px; width:406px;}
</style>
</head>

<body>
<div id="container">
	<div class="tab-menu">
    	<ul class="clearfix">
        	<li class="selected"><a href="javascript:void(0);">tabs1</a></li>
            <li><a href="javascript:void(0);">tabs2</a></li>
            <li><a href="javascript:void(0);">tabs3</a></li>
            <li><a href="javascript:void(0);">tabs4</a></li>
        </ul>
    </div>
    <div class="tab-content">
    	<div class="tab-all clearfix">
        	<div>tabs1</div>
            <div>tabs2</div>
            <div>tabs3</div>
            <div>tabs4</div>
        </div>
    </div>
    <div class="white-div"></div>
</div>


<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js" language="javascript" type="text/javascript"></script>
<script>
$(function(){
	var $tabmenu=$(".tab-menu li");
	var $tabcon=$(".tab-all");
	$tabmenu.on("click","a",function(){
		var _index=$(this).parent().index();
		$(this).parent().addClass("selected").siblings().removeClass("selected");
		var twidth=$tabcon.find("div").eq(_index).width();
		$tabcon.animate({'margin-left':-twidth*_index + 'px'});
	});
});
</script>
</body>
</html>

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供多倫網(wǎng)站建設、多倫做網(wǎng)站、多倫網(wǎng)站設計、多倫網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、多倫企業(yè)網(wǎng)站模板建站服務，十載多倫做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。附件：http://down.51cto.com/data/2366002

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：tab滑動特效-創(chuàng)新互聯(lián)
標題路徑：http://jinyejixie.com/article4/dedooe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、搜索引擎優(yōu)化、域名注冊、外貿(mào)網(wǎng)站建設、網(wǎng)站排名、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

tab滑動特效-創(chuàng)新互聯(lián)