jQuery页面多个tab选项卡切换代码



85 337 113



特效描述:jQuery 页面多个 tab选项卡切换代码,jQuery页面多个tab选项卡切换代码

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/tab.js"></script>

3. HTML代码

<div style="width:1000px;margin: 0 auto;">
<h1 class="titleH1 underNone clearfix">
	<span class="left underNone underLine">交易产品 </span>
</h1>
<div class="jyTable">
	<div class="clearfix">
		<ul class="title title1 left">
			<li class='cur'>当代名家</li>
			<li>潜力名家</li>
			<li>新名家</li>
		</ul>
		<ul class="titleexp right" style="padding-top: 8px;">
			<li>当代名家指数:378.9</li>
			<li>新名家指数:411.2</li>
			<li>潜力名家指数:189.2</li>
		</ul>
	</div>
	<div class='zong'>
		<div class="list list1">
			<div class="tabCon">
				<ul>
					<li class="tabth clearfix">
						<span style="width: 13%">名称</span>
						<span style="width: 12%">代码</span>
						<span style="width: 10%">规模</span>
						<span style="width: 16%">价格</span>
						<span style="width: 16%">发售日期</span>
						<span style="width: 16%">截止日期</span>
						<span style="width: 15%">操作</span>
					</li>
				</ul>
				<div id="s1">
					<ul class="tabUl">
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
					</ul>
				</div>
			</div>
			<div class="tabCon">
				<ul>
					<li class="tabth clearfix">
						<span style="width: 13%">名称</span>
						<span style="width: 12%">代码</span>
						<span style="width: 10%">规模</span>
						<span style="width: 16%">价格</span>
						<span style="width: 16%">发售日期</span>
						<span style="width: 16%">截止日期</span>
						<span style="width: 15%">操作</span>
					</li>
				</ul>
				<div id="s2">
					<ul class="tabUl">
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
						<li class="tabtr clearfix">
							<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
							<span style="width: 12%;color: #AB9C08">61000165</span>
							<span style="width: 10%;color: #067D14">大</span>
							<span style="width: 15%">5000000.0</span>
							<span style="width: 17%">2014-12-12</span>
							<span style="width: 17%">2014-12-12</span>
							<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
						</li>
					</ul>
				</div>
			</div>
			<div class="tabCon">
			<ul>
				<li class="tabth clearfix">
					<span style="width: 13%">名称</span>
					<span style="width: 12%">代码</span>
					<span style="width: 10%">规模</span>
					<span style="width: 16%">价格</span>
					<span style="width: 16%">发售日期</span>
					<span style="width: 16%">截止日期</span>
					<span style="width: 15%">操作</span>
				</li>
			</ul>
			<div id="s3">
				<ul class="tabUl">
					<li class="tabtr clearfix">
						<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
						<span style="width: 12%;color: #AB9C08">61000165</span>
						<span style="width: 10%;color: #067D14">大</span>
						<span style="width: 15%">5000000.0</span>
						<span style="width: 17%">2014-12-12</span>
						<span style="width: 17%">2014-12-12</span>
						<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
					</li>
					<li class="tabtr clearfix">
						<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
						<span style="width: 12%;color: #AB9C08">61000165</span>
						<span style="width: 10%;color: #067D14">大</span>
						<span style="width: 15%">5000000.0</span>
						<span style="width: 17%">2014-12-12</span>
						<span style="width: 17%">2014-12-12</span>
						<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
					</li>
					<li class="tabtr clearfix">
						<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
						<span style="width: 12%;color: #AB9C08">61000165</span>
						<span style="width: 10%;color: #067D14">大</span>
						<span style="width: 15%">5000000.0</span>
						<span style="width: 17%">2014-12-12</span>
						<span style="width: 17%">2014-12-12</span>
						<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
					</li>
					<li class="tabtr clearfix">
						<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
						<span style="width: 12%;color: #AB9C08">61000165</span>
						<span style="width: 10%;color: #067D14">大</span>
						<span style="width: 15%">5000000.0</span>
						<span style="width: 17%">2014-12-12</span>
						<span style="width: 17%">2014-12-12</span>
						<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
					</li>
					<li class="tabtr clearfix">
						<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
						<span style="width: 12%;color: #AB9C08">61000165</span>
						<span style="width: 10%;color: #067D14">大</span>
						<span style="width: 15%">5000000.0</span>
						<span style="width: 17%">2014-12-12</span>
						<span style="width: 17%">2014-12-12</span>
						<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
					</li>
					<li class="tabtr clearfix">
						<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
						<span style="width: 12%;color: #AB9C08">61000165</span>
						<span style="width: 10%;color: #067D14">大</span>
						<span style="width: 15%">5000000.0</span>
						<span style="width: 17%">2014-12-12</span>
						<span style="width: 17%">2014-12-12</span>
						<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
					</li>
				</ul>
			</div>
		</div>
		</div>
	</div>
</div>
<div class="jyTable">
<div class="clearfix">
	<ul class="title title1 left">
		<li class='cur'>当代名家</li>
		<li>潜力名家</li>
		<li>新名家</li>
	</ul>
	<ul class="titleexp right" style="padding-top: 8px;">
		<li>当代名家指数:378.9</li>
		<li>新名家指数:411.2</li>
		<li>潜力名家指数:189.2</li>
	</ul>
</div>
<div class='zong'>
<div class="list list1">
<div class="tabCon">
	<ul>
		<li class="tabth clearfix">
			<span style="width: 13%">名称</span>
			<span style="width: 12%">代码</span>
			<span style="width: 10%">规模</span>
			<span style="width: 16%">价格</span>
			<span style="width: 16%">发售日期</span>
			<span style="width: 16%">截止日期</span>
			<span style="width: 15%">操作</span>
		</li>
	</ul>
	<div id="s1">
		<ul class="tabUl">
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
		</ul>
	</div>
</div>
<div class="tabCon">
	<ul>
		<li class="tabth clearfix">
			<span style="width: 13%">名称</span>
			<span style="width: 12%">代码</span>
			<span style="width: 10%">规模</span>
			<span style="width: 16%">价格</span>
			<span style="width: 16%">发售日期</span>
			<span style="width: 16%">截止日期</span>
			<span style="width: 15%">操作</span>
		</li>
	</ul>
	<div id="s2">
		<ul class="tabUl">
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
		</ul>
	</div>
</div>
<div class="tabCon">
	<ul>
		<li class="tabth clearfix">
			<span style="width: 13%">名称</span>
			<span style="width: 12%">代码</span>
			<span style="width: 10%">规模</span>
			<span style="width: 16%">价格</span>
			<span style="width: 16%">发售日期</span>
			<span style="width: 16%">截止日期</span>
			<span style="width: 15%">操作</span>
		</li>
	</ul>
	<div id="s3">
		<ul class="tabUl">
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn hot">热售中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
			<li class="tabtr clearfix">
				<span style="width: 13%; color: #F7001E">赵文芳子啊</span>
				<span style="width: 12%;color: #AB9C08">61000165</span>
				<span style="width: 10%;color: #067D14">大</span>
				<span style="width: 15%">5000000.0</span>
				<span style="width: 17%">2014-12-12</span>
				<span style="width: 17%">2014-12-12</span>
				<a style="width: 12%;color: #F7001E"><em class="clickbtn pass">交易中</em></a>
			</li>
		</ul>
	</div>
</div>
</div>
</div>
</div>
</div>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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