jquery编写的选项卡案例

jquery编写的选项卡案例

实现功能：
选项卡能够根据你所选择的选项切换到对应的选项内容

1、CSS样式

<style>
	/*设置整个字体为微软雅黑，字体大小为16*/
	body{
		font:16px "Microsoft YaHei",sans-serif;
		}
	/*设置ul的属性*/
	ul{
		list-style-type:none; 
		margin:0;
		padding:0;
		}
	/*设置选项卡的整体布局*/
	.container{
		margin:100px auto;
		width:800px;
		}
	/*设置选项卡列表*/
	.option-list{
		height:40px;
		border-bottom:1px solid #ccc;
		border-left:1px solid #ccc;
		}
	/*设置选项卡列表下的选项*/
	.option-list li{
		float:left;
		padding:0px 20px;
		height:39px;  /*因为选项卡列表有41px，为了选项底部线显示所以设置为39px*/
		line-height:40px;
		border-top:1px solid #ccc;
		border-right:1px solid #ccc;
		background-color:#f5f5f5;
		cursor:pointer;
		}
	/*设置选项卡列表下的第一个选项为显示状态*/
	.option-list li.current{
		height:40px;
		background-color:#fff;
		}
	/*设置选项卡列表下的内容*/
	.card-list li{
		display:none; /*内容隐藏*/
		padding:20px;
		height:300px;
		border:1px solid #ccc;
		border-top:none;
		}
	/*设置选项卡列表下的第一个内容为显示状态*/
	.card-list li.current{
		display:block; /*内容显示*/
		}
</style>

2、body样式

<!--选项卡的整体布局-->
<div class="container">
	<!--选项卡列表-->
	<div class="option-list">
    	<ul>
        	<li class="current">选项卡一</li>
            <li>选项卡二</li>
            <li>选项卡三</li>
            <li>选项卡四</li>
            <li>选项卡五</li>
        </ul>
    </div>
    <!--选项卡内容-->
    <div class="card-list">
    	<ul>
        	<li class="current">这是选项卡一的内容</li>
            <li>这是选项卡二的内容</li>
            <li>这是选项卡三的内容</li>
            <li>这是选项卡四的内容</li>
            <li>这是选项卡五的内容</li>
        </ul>
    </div>
</div>

3、jquery代码

<script src="js/jquery-3.4.1.min.js"></script>
<script>
	$(document).ready(function(){
		$(".option-list li").click(function(){
			//自由切换选项卡下的选项
			$(this).addClass("current").siblings("li").removeClass("current");
			//对选项卡下的所有内容都隐藏，然后通过选择选项的获取的索引添加属性类
			$(".card-list li").removeClass("current").eq($(this).index()).addClass("current");
			});
		});
</script>

• 选项卡原图效果
  

• 选项卡自由切换效果