javascript - js 段函数不再工作

Question

突然间，我无意中导致一段代码不再工作。我正在使用以下内容来显示和同时隐藏同一网站文件中的内容:

    <script type="text/javascript">
        $('.tabs').on('click', 'a', function(){
            $('section').hide();
            $($(this).attr('data-url')).show();
            var $this = $(this),
            $ul = $this.parents('ul');
            $ul.find('a').removeClass('active');
            $this.addClass('active');
        }); 
    </script>

下面是显示和隐藏的html代码:

    <ul class="tabs">
        <li><a class="active" href="javascript:void(0);" data-url="#content1">Content1</a></li>
        <li><a href="javascript:void(0);"  data-url="#content2">Content2</a></li>
        <li><a href="javascript:void(0);" data-url="#content3">Content3</a></li>
    </ul>

        <section id="content1">
            Some content 1
        </section>

        <section id="content2">
            Some content 2
        </section>

        <section id="content3">
            Some content 3
        </section>

下面是CSS代码:

section {
    display: none;
}

section:first-of-type {
    display: block;
}

ul.tabs {
    list-style: none;
    text-align: center;
}

ul.tabs li {
    display: inline-block;
}

ul.tabs li a {
    display: inline-block;
    width: 100px;
    margin-right: 25px;
    margin-bottom: 25px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

ul.tabs li a:hover {
    color: #349cf0;
}

ul.tabs li a.active {
    color: #349cf0;
}

我不知道为什么这突然停止工作。现在我还没有包括网站上的所有内容。你们中的任何人都可以向我解释什么可能会干扰代码吗？也许我不小心更改了js中的某些内容。我从其他人那里收到了代码，但我自己无法发现任何错误。如果这里有人能够发现任何错误，我将不胜感激!

提前致谢

Answer 1

看起来它正在工作:http://jsfiddle.net/L0Lnav2t/1/

<script type="text/javascript">
        $('.tabs').on('click', 'a', function(){
            $('section').hide();
            $($(this).attr('data-url')).show();
            var $this = $(this),
            $ul = $this.parents('ul');
            $ul.find('a').removeClass('active');
            $this.addClass('active');
        }); 
    </script>

我假设您的代码在初始化 onclick 监听器之前导致另一个错误，使其无法正常工作。

虽然它本身看起来还不错