解决tab标签页，相同id时切换失灵的问题

最新推荐文章于 2023-04-26 11:42:15 发布

weixin_30732487

最新推荐文章于 2023-04-26 11:42:15 发布

阅读量331

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/em2464/p/7681342.html

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="out">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#a1" data-toggle="tab">菜单1</a>
            </li>
            <li>
                <a href="#a2" data-toggle="tab">菜单2</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="a1">
                <div>菜单1</div>
            </div>
            <div class="tab-pane fade in" id="a2">
                <div>菜单2</div>
            </div>
        </div>
    </div>
    <div class="out">
        <ul id="myTab1" class="nav nav-tabs">
            <li class="active">
                <a href="#a1" data-toggle="tab">菜单3</a>
            </li>
            <li>
                <a href="#a2" data-toggle="tab">菜单4</a>
            </li>
        </ul>
        <div id="myTabContent1" class="tab-content">
            <div class="tab-pane fade in active" id="a1">
                <div>菜单3</div>
            </div>
            <div class="tab-pane fade in" id="a2">
                <div>菜单4</div>
            </div>
        </div>
    </div>
    <script>
　　　　//下面的方法解决了这个问题
        $(function () {
            $('ul.nav.nav-tabs li a').on('click',function () {
                console.log($(this).attr('href'));
                $(this).parents('div.out').find('li').removeClass('active');
                $(this).parent('li').addClass('active');
                $(this).parents('div.out').find('div.tab-pane').removeClass('active');
                $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');
            })
        })
　　　　//若不加入以上代码 在点击菜单4的时候，并不能实现内容切换
    </script>
</body>
</html>

错误显示，点击菜单时只会查找a标签的href对应的tab-content下的id元素（查找修改第一个匹配的元素的class）

示例：（未修改之前bug分析）

　　初始界面

　　初始代码

点击菜单1，2无问题。

　　点击菜单2后：

　　点击菜单4：（bug要出现咯）

　　　　界面

　　　　如上，点击菜单4后，第一个div.out下面的div#a1的内容隐藏了，菜单2的内容显示

　　　　代码：

在点击了菜单4之后继续点击菜单3，会发现界面如下：

　　这次打开了菜单1的内容，原因和上面一样，查找了页面中的第一个a1

　总的来说，在点击菜单3和菜单4的时候第二个div.out里面的div#myTabContent1的内容一直没有变化。（谁让它们排行老二呢……）

　　其实在编码的时候还是要保证id的唯一性的，在整个页面的唯一性。但是有的时候，还是避免不了id重复，这个时候我们就需要区分id所在的块咯。

　　　　下面的代码我就是类似的思路啦。

　　　　 $(function () {

            $('ul.nav.nav-tabs li a').on('click',function () {
                console.log($(this).attr('href'));
                $(this).parents('div.out').find('li').removeClass('active');
                $(this).parent('li').addClass('active');
                $(this).parents('div.out').find('div.tab-pane').removeClass('active');
                $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');
            })
        })

转载于:https://www.cnblogs.com/em2464/p/7681342.html

weixin_30732487

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决tab标签页，相同id时切换失灵的问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap....
复制链接

扫一扫