javascript - 将属性选择器与 Jquery 结合使用，但结果无法完全正常工作

Question

我的脚本中有以下代码:

function setup_buttons() {
    $('#showdiv_Home').click(function() {
        $('div[id^=div]').hide();
        $('#div1').show();
    });
    $('#showdiv_About_Overview').click(function() {
        $('div[id^=div]').hide();
        $('#div2').show();
    });
}

这是 HTML 中的选择:

<li><a href="" id="showdiv_Home">| HOME |</a></li>
<li><a href="" id="showdiv_About_Overview">| ABOUT US |</a>

这是需要显示和隐藏的 div:

<!-- This is the front page -->
<div id="div1" style="display:block">
    <p> I am div 1</p>
</div>

<!-- This is the About-Company overview page -->
<div id ="div2" style="display:none;">
    <p> I am div 2</p>
</div>

我看不出代码有什么问题，但我需要你们中的一些聪明人来帮助我。

当我单击我的选择时，div 显示会被更改为阻止，但仅持续一秒钟，然后将其自身更改回隐藏。我不明白为什么。

真的，我的问题是，我该如何解决它？

Answer 1

将 anchor 标记的 href 值更改为“#”。它会为你工作。

 <li><a href="#" id="showdiv_Home">| HOME |</a></li>
 <li><a href="#" id="showdiv_About_Overview">| ABOUT US |</a>

working demo