选项卡的使用

Posted 2020-11-02 ksy-zsy

html页

<ul>
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
</ul>

<div class="box">

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>

</div> 

JS页

var $div_li = $("#ul li");
$div_li.click(function () {
var div_index = $div_li.index(this);
$(".box>div").eq(div_index).show().siblings().hide();//切换选项卡
$("ul>li").eq(div_index).css(‘color‘, ‘#41d96f‘).siblings().css(‘color‘, ‘#999‘);//切换选项卡之后，文字颜色变换
$("ul>li").eq(div_index).css(‘border-bottom‘, ‘2px solid #41d96f‘).siblings().css(‘border-bottom‘, ‘0‘);//切换选项卡之后，下标颜色变换
$("html , body").scrollTop(0); //切换选项卡之后，置顶。
});