用JavaScript來(lái)實(shí)現(xiàn)Tab點(diǎn)擊切換

3403771864 發(fā)布于2022-10-24 21:40 / 490人閱讀

　　現(xiàn)在很多都用到Tab 選項(xiàng)卡切換效果，例如點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果，本篇文章講述的就是通過(guò)原生 Jquery 來(lái)實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。

　　例如：

　　html

　　<body>
　　<div style="position: relative;margin-top: 56px;display: flex;justify-content: space-between;width: 1200px;" id="left">
　　<ul class="gw_b_tab">
　　<li class="gw_b_item gw_b_item2">111</li>
　　<li class="gw_b_item">222</li>
　　<li class="gw_b_item">333</li>
　　<li class="gw_b_item">444</li>
　　<li class="gw_b_item">555</li>
　　<li class="gw_b_item">666</li>
　　</ul>
　　<div>
　　<div class="gw_b_box" style="display: block;">
　　<h3 class="gw_box_tit">111</h3>
　　</div>
　　<div class="gw_b_box" >
　　<h3 class="gw_box_tit">222</h3>
　　</div>
　　<div class="gw_b_box">
　　<h3 class="gw_box_tit">333</h3>
　　</div>
　　<div class="gw_b_box" >
　　<h3 class="gw_box_tit">444</h3>
　　</div>
　　<div class="gw_b_box">
　　<h3 class="gw_box_tit">555</h3>
　　</div>
　　<div class="gw_b_box" >
　　<h3 class="gw_box_tit">666</h3>
　　</div>
　　</div>
　　</div>

　　css

　*{
　　padding: 0;
　　margin: 0;
　　}
　　li{
　　list-style: none;
　　}
　　.gw_b_tab{
　　color: #333333;
　　width: 240px;
　　height: 490px;
　　background: #FFFFFF;
　　border-radius: 8px;
　　overflow: hidden;
　　overflow-y: hidden;
　　}
　　.gw_b_item{
　　height: 82px;
　　padding: 0 22px;
　　position: relative;
　　font-size: 16px;
　　line-height: 80px;
　　text-align: center;
　　cursor: pointer;
　　border-radius: 8px;
　　font-weight: bold;
　　white-space: nowrap;
　　}
　　.gw_b_box{
　　/* display: none; */
　　width: 880px;
　　position: absolute;
　　right: 0;
　　top: 0;
　　display: none;
　　background: #FB6638;
　　height: 490px;
　　border-radius: 30px;
　　}
　　.gw_b_item2{
　　background-color: #FB6638;
　　color: #fff;
　　}
　　.gw_box_tit{
　　height: 48px;
　　line-height: 48px;
　　font-size: 24px;
　　color: #ffffff;
　　margin-bottom: 18px;
　　text-align: center;
　　}

　　<script src="/static/js/jquery-1.11.3.min.js"></script>
　　<script>
　　$(function () {
　　$("#left .gw_b_item").click(function () {
　　var index = $(this).index();
　　$(".gw_b_box").eq(index).show();
　　$(this).addClass('gw_b_item2')
　　// :eq() 選擇器選取帶有指定 index 值的元素。
　　$(".gw_b_box").eq(index).siblings().hide();
　　$(this).siblings().removeClass('gw_b_item2')
　　})
　　})
　　</script>