Question

我的JS文件中的onClick函数有问题当打开选项卡，并且我尝试单击第二个链接时，除非单击两次链接，否则新选项卡将不会打开。这是html代码：

<body> <nav> <div id="navContainer"> <ul> <li> <a href='' class='tabButton' data-openTab='1'>1</a></li> <li> <a href='' class='tabButton' data-openTab='2'>2</a></li> <li> <a href='' class='tabButton' data-openTab='3'>3</a></li> <li> <a href='' class='tabButton' data-openTab='4'>4</a></li> <li> <a href='' class='tabButton' data-openTab='5'>5</a></li> </ul> </div> <div id = "tabCont" class="tabContainer"> <div id="1"> </div> </div> <div id="2" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="3" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="4" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="5" > <a href="" class="closeButton"> CLOSE </a> </div> </nav> </body>

这是JS

$(document).ready(function() {
document.menuIsOpen = false;

$('.tabContainer > div').hide();
$('.tabContainer > div:first-of-type').hide();

$('.tabButton').click(function(event) {
    if (document.menuIsOpen == false) {
        document.menuIsOpen = true;
        event.preventDefault();

        $('.tabContainer > div').hide();
        $("#" + $(this).attr('data-openTab')).toggle("slow").css("display", "block");

        $('.tabButton').click(function(event) {

            $('.tabContainer > div').hide();
            $("#" + $(this).attr('data-openTab')).show().css("display", "block");
        });
    } else {
        document.menuIsOpen = false;
        event.preventDefault();
        $('.tabContainer > div').hide("slow");
        $('.tabContainer > div:first-of-type').hide("slow");

    }

    $('.closeButton').click(function(event) {
        event.preventDefault();

        $('.tabContainer > div').hide("slow");
        $('.tabContainer > div:first-of-type').hide("slow");
    });
});

$('.tabContainer > div').hide();
$('.tabContainer > div:first-of-type').hide();
});

我确定我的代码确实非常混乱但它的工作方式与onClick问题上的APART一样。先谢谢你了！

Answer 1

HTML：

<nav>
    <div id="navContainer">
        <ul>
            <li>
            <a href='' class='tabButton' data-openTab='1'>1</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='2'>2</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='3'>3</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='4'>4</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='5'>5</a>
            </li>
        </ul>
    </div>
    <div id = "tabCont" class="tabContainer">
        <div id="1">1
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="2">2
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="3">3
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="4">4
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="5">5
            <a href="" class="closeButton"> CLOSE </a>
        </div>
    </div>
</nav>

JS：

    document.menuIsOpen = false;
    $('.tabContainer > div').hide();
    $('.tabButton').click(function(event) {
        var
            open = $("#" + $(this).attr('data-openTab')),
            isOpened = open.is('.opened');

        event.preventDefault();
        if (document.menuIsOpen) {
            document.menuIsOpen = false;
            $('.opened').hide("slow").removeClass('opened');
        }
        if (!isOpened) {
            document.menuIsOpen = true;
            open.addClass('opened').show("slow").css("display", "block");
        }
    });
    $('.closeButton').click(function(event) {
        event.preventDefault();
        $('.opened').hide("slow").removeClass('opened');
    });

DEMO：http://jsfiddle.net/nothrem/mcgv4gok/

onClick问题与容器的导航下拉列表（需要双击下拉列表）

1 个答案: