jq的选项卡tab

Posted 2020-06-09

jq中选项卡很简单，的注意是他结构命名（网上有很多，其中不乏不规范）

1.tab

2.tab-hd (选项栏)

3.tab-bd（选项栏对应的内容）

css代码（布局没问题，可以只看jquery代码）

*{padding: 0; margin: 0;}
ul {list-style: none; }
.tab {width:450px; height:200px; overflow: hidden; border:1px solid #ccc; margin: 0 auto; }
.tab-hd ul { overflow: hidden;  margin-left: -4px; }
.tab-hd li { float:left; width: 150px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; line-height: 50px; font-size: 24px; text-align: center; cursor:pointer;}
.tab-hd li.selected {border-bottom:none;}
.tab-bd li { display: none; font-size: 30px; line-height: 5; text-align: center; }

html代码：

<div class="tab">
	<div class="tab-hd">
		<ul>
			<li class="selected">项目一</li>
			<li>项目二</li>
			<li>项目三</li>
		</ul>
	</div>
	<div class="tab-bd">
		<ul>
			<li style="display:block;">111111</li>
			<li>222222</li>
			<li>333333</li>
		</ul>
	</div>	
</div>

jq代码：

$(function(){
	$(‘.tab-hd li‘).click(function(){
		$(this).addClass(‘selected‘).siblings().removeClass(‘selected‘);//这个可写成下面代码
		/*
		 $(‘.tab-hd li‘).removeClass(‘selected‘);
		 $(this).addClass(‘selected‘);
		 */
		$(‘.tab-bd li‘).hide().eq($(this).index()).show();
	}).hover(function(){
		//可以加其他动画效果
	});
})