jQuery选项卡切换实现代码

js：

$("ul.list li").click(function() {
    // 先消除全部的checked类，使其处于空白状态
    $("ul.list li").removeClass("checked");
    // 点击那个选项就在里面添加一个checked类   
    // 注：this??>谁调用指向谁
    $(this).addClass("checked");
    // 原理同上，消除main里面的内容
    $(".main>div").css("display", "none");
    // 获得点击li 的索引
    var index = $("ul.list li").index(this);
    // 通过选项的索引确定相应内容的索引，让其显示
    $(".main>div").eq(index).css("display", "block");

});

css：

 * {
	margin:0;
	padding:0;
}
div.box {
	width:50vw;
	height:50vh;
	/* 利用flex布局，让ul和div处于同一水平列，除此之外float 也能做到这一点 */
            display:flex;
	/*  border:1px solid red;
	*/
            margin:10vh auto;
}
ul.list {
	width:10vw;
	height:50vh;
	/* 去除li前面的黑点 */
            list-style:none;
	/* 文字居中显示 */
            text-align:center;
}
ul.list>li {
	border:1px solid black;
	padding:1vh 0;
	/* 光标变成小手状 */
            cursor:pointer;
}
div.main {
	width:40vw;
	height:50vh;
}
.main1,.main2,.main3,.main4,.main5 {
	width:100%;
	height:100%;
	display:none;
}
img {
	width:100%;
	height:100%;
}
li.checked {
	background:red;
}
div.checked {
	display:block;
}

html：

<div class="box">
    <ul class="list">
        <li class="checked">选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
    </ul>
    <div class="main">
        <div class="main1 checked">
            <img src="https://www.jq22.com/img/cs/500x300-1.png" alt="">
        </div>
        <div class="main2">
            <img src="https://www.jq22.com/img/cs/500x300-2.png" alt="">
        </div>
        <div class="main3">
            <img src="https://www.jq22.com/img/cs/500x300-3.png" alt="">
        </div>
        <div class="main4">
            <img src="https://www.jq22.com/img/cs/500x300-4.png" alt="">
        </div>
        <div class="main5">
            <img src="https://www.jq22.com/img/cs/500x300-5.png" alt="">
        </div>
    </div>
</div>