jQuery选项卡切换
jQuery选项卡切换
孤月蓝风 发表于3个月前
jQuery选项卡切换
  • 发表于 3个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

该代码通过jQuery实现了选项卡切换效果,很小巧,效果也很简单,但是一般来用足矣。

<script type="text/javascript">$(document).ready(function(){
        $(".tab_news li").each(function(){
            $(this).mouseover(function(){
                $(".tab").css("display","none");
                id_name = $(this).attr("id");
                id_len = id_name.length;
                id = id_name.substr(id_len-1,1);
                $("#tab"+id).css("display","block");
            });
        });
    });</script>
<div style="width:500px;height:30px;">
    <ul class="tab_news">
        <li id="tab_1">1</li>
        <li id="tab_2">2</li>
        <li id="tab_3">3</li>
    </ul>
</div>
<div class="tab" id="tab1" style="width:500px;height:200px;display:block;">
    111
</div>
<div class="tab" id="tab2" style="width:500px;height:200px;display:none;">
    222
</div>
<div class="tab" id="tab3" style="width:500px;height:200px;display:none;">
    333
</div>


共有 人打赏支持
粉丝 8
博文 70
码字总数 36962
×
孤月蓝风
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: