jquery tab选项卡切换功能

 所属分类:鼠标/悬停/点击

 浏览:31次-  下载:0次-  评论: 0次-  更新时间:2021-10-14

jquery tab选项卡切换功能

1、引入jquery文件

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

2、html代码

<div class="tab_div">
    <ul class="tab">
        <li class="cur">网页特效</li>
        <li>建站源码</li>
    </ul>
    <div class="tab_cont on">
        <p>11111111111111</p>
        <p>11111111111111</p>
        <p>11111111111111</p>
        <p>11111111111111</p>
        <p>11111111111111</p>
    </div>
    <div class="tab_cont">
        <p>2222222222222</p>
        <p>2222222222222</p>
        <p>2222222222222</p>
        <p>2222222222222</p>
        <p>2222222222222</p>
    </div>
</div>

3、js代码

<script>
$(".tab li").click(function() {
    $(this).addClass("cur").siblings().removeClass('cur');
    $(".tab_cont").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');
});
</script>


金币说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值金币充值会员更多说明»
描述:jquery tab选项卡切换功能,使用非常的简单方便,支持多标签切换可根据实际使用情况增加或删除。

文件目录结构

  • ┝ www.zzsucai.com.txt
  • ┝ index.html
  • ┝ 站长素材网.url

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!
我的金币余额: 0 已下载次数: 0
所需金币:12开始下载

金币获取:签到、评论、投搞、充值、发帖、回帖    » 在线充值(10金币=1元)