Question

我有三个链接，Logos（#logos），名片（#businesscards），传单（#flyers）

默认情况下，＆＃34; Logos＆＃34;链接以内容（#logos-container）显示突出显示。点击＆＃34;名片＆＃34;，名片内容（＃businesscards-container）将显示隐藏的其他内容。当点击＆＃34;传单＆＃34;时，传单（＃flyer-container）内容将与其他人隐藏显示。

这是我的代码：

[Javascript]

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">                </script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#businesscards-container").hide();
        $("#flyers-container").hide();
        $("#logos").click(function () {
            $("#businesscards-container").hide();
            $("#flyers-container").hide();
            $("#logos-container").show();
        });
        $("#businesscards").click(function () {
            $("#logos-container").hide();
            $("#flyers-container").hide();
            $("#businesscards-container").show();
        });
        $("#flyers").click(function () {
            $("#logos-container").hide();
            $("#businesscards-container").hide();
            $("#flyers-container").show();
        });
    });
    </script>

[HTML]

<div id="front-nav">
    <ul>
        <li id="#logos"><a href="#logos">Logos</a></li>
        <li id="#businesscards"><a href="#businesscards">Business cards</a></li>
        <li id="#flyers" style="padding-right:60px; border-right:none;"><a href="#flyers">Flyers</a></li>
    </ul>
</div>

<div id="logos-container">
</div>

<div id="businesscards-container">
</div>

<div id="flyers-container">
</div>

默认设置正常，但是当我点击其他链接时却没有。我尝试添加e.preventDefault但没有结果。我应该怎么做呢？

感谢您的帮助。

编辑：已解决！谢谢。

Answer 1

您应该在php页面上为所有容器设置默认显示。我假设徽标是默认显示。

<div id="logos" style="display:block;">
   <!-- some code -->
</div>
<div id="businesscards" style="display:none;">
   <!-- some code -->
</div>
<div id="flyers" style="display:none;">
   <!-- some code -->
</div>

然后JavaScript将处理元素的显示和隐藏

Answer 2

正如您所提到的那样，它们是链接，您需要防止默认行为，请尝试尝试：

    $("#logos").click(function (e) {
        e.preventDefault();
        $("#businesscards-container").hide();
        $("#flyers-container").hide();
        $("#logos-container").show();
    });
    $("#businesscards").click(function (e) {
        e.preventDefault();
        $("#logos-container").hide();
        $("#flyers-container").hide();
        $("#businesscards-container").show();
    });
    $("#flyers").click(function (e) {
        e.preventDefault();
        $("#logos-container").hide();
        $("#businesscards-container").hide();
        $("#flyers-container").show();
    });

Answer 3

以下是固定解决方案 - JSFiddle

#flyers-container {

    display: none;
}

#businesscards-container {

    display: none;
}

最初只需将display none添加到你想要隐藏的div中...并且waa laaa

单击JS隐藏/显示元素

3 个答案: