使用带有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

这样做：

$(document).ready(function(){
    $('#showdiv_Home').click(function(e){
        e.preventDefault();
        $('div[id^=div]').hide();
        $('#div1').show();
    });

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

});

Answer 2

我建议您不要将click事件放在函数中，只需在doc ready块中执行此操作：

$('li').on('click', function (e) {
    e.preventDefault();
    var idx = $(this).index() + 1;
    $('div[id^="div"]').hide();
    $('#div' + idx).show();
});

Demo with shortest way possible.

Answer 3

将锚标记的href值更改为＆＃34;＃＆＃34;。它会对你有用。

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

working demo

Answer 4

你可以使用这段代码......

function setup_buttons()
        {
            $('#showdiv_Home').click( function()
                {
                    $('#div2').hide();
                    $('#div1').show();

                });
                $('#showdiv_About_Overview').click( function()
                {
                    $('#div1').hide();
                    $('#div2").show();

                });

        }