Javascript 单击链接时显示/隐藏div

我试图在单击链接时显示和隐藏一个div。我得到了正确显示的div，但我希望在单击其他div时该div消失。这是我目前拥有的代码

<script type="text/javascript"> 
            $(function() {
                $('#attach_silver').click(function() {
                    $('#sec_silver').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_gold').click(function() {
                    $('#sec_gold').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_platinum').click(function() {
                    $('#sec_platinum').show();
                    return false;
                });        
            });
        </script>

<a href="#" id="attach_silver">Silver</a>
    <a href="#" id="attach_gold">Gold</a>
    <a href="#" id="attach_platinum">Platinum</a>

<div id="sec_silver" style="display: none;">
        Hello world!! Silver              
    </div>

    <div id="sec_gold" style="display: none;">
        Hello world!! Gold             
    </div>

    <div id="sec_platinum" style="display: none;">
        Hello world!! Platinum            
    </div>

$（函数（）{
$（“#附加银币”）。单击（函数（）{
$（'secu_silver'）.show（）；
返回false；
});        
});
$（函数（）{
$（“#附加黄金”）。单击（函数（）{
$（'sec#u gold'）.show（）；
返回false；
});        
});
$（函数（）{
$（“#附加白金”）。单击（函数（）{
$（'sec#u白金'）。show（）；
返回false；
});        
});
你好，世界！！银
你好，世界！！金
你好，世界！！铂金

尝试添加一个类

<div id="sec_silver" style="display: none;" class="divclass">
    Hello world!! Silver              
</div>

<div id="sec_gold" style="display: none;" class="divclass">
    Hello world!! Gold             
</div>

<div id="sec_platinum" style="display: none;" class="divclass">
    Hello world!! Platinum            
</div>

在此模式下，您可以在单击事件中隐藏所有div，并显示要添加类的div

<div id="sec_silver" style="display: none;" class="divclass">
    Hello world!! Silver              
</div>

<div id="sec_gold" style="display: none;" class="divclass">
    Hello world!! Gold             
</div>

<div id="sec_platinum" style="display: none;" class="divclass">
    Hello world!! Platinum            
</div>

---

在此模式下，您可以在单击事件中隐藏所有div，并显示所需的div。

您的单击事件当前显示相关div，您只需要它们来隐藏其他div。

您的单击事件当前显示相关div，您只需要它们来隐藏其他div。

使用

您的代码变为

$(function () {
    $('#attach_silver').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_silver').show();
        return false;
    });
    $('#attach_gold').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_gold').show();
        return false;
    });
    $('#attach_platinum').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_platinum').show();
        return false;
    });
});

使用

您的代码变为

$(function () {
    $('#attach_silver').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_silver').show();
        return false;
    });
    $('#attach_gold').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_gold').show();
        return false;
    });
    $('#attach_platinum').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_platinum').show();
        return false;
    });
});

---

您只显示其他div，从不让它们隐藏：

<script type="text/javascript"> 
$(function () {
    $('#attach_silver').click(function () {
        console.log('sliver click');
        $('#sec_silver').show();
        $('#sec_gold').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_gold').click(function () {
        $('#sec_gold').show();
        $('#sec_silver').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_platinum').click(function () {
        $('#sec_platinum').show();
        $('#sec_gold').hide();
        $('#sec_silver').hide();
        return false;
    });
});
</script>

$（函数（）{
$（“#附加银币”）。单击（函数（）{
log（'siver click'）；
$（'secu_silver'）.show（）；
$（'sec#u gold'）。隐藏（）；
$（'secu_platinum'）。隐藏（）；
返回false；
});
});
$（函数（）{
$（“#附加黄金”）。单击（函数（）{
$（'sec#u gold'）.show（）；
$（'secu_silver'）。隐藏（）；
$（'secu_platinum'）。隐藏（）；
返回false；
});
});
$（函数（）{
$（“#附加白金”）。单击（函数（）{
$（'sec#u白金'）。show（）；
$（'sec#u gold'）。隐藏（）；
$（'secu_silver'）。隐藏（）；
返回false；
});
});

您只显示其他div，从不告诉它们隐藏：

<script type="text/javascript"> 
$(function () {
    $('#attach_silver').click(function () {
        console.log('sliver click');
        $('#sec_silver').show();
        $('#sec_gold').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_gold').click(function () {
        $('#sec_gold').show();
        $('#sec_silver').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_platinum').click(function () {
        $('#sec_platinum').show();
        $('#sec_gold').hide();
        $('#sec_silver').hide();
        return false;
    });
});
</script>

$（函数（）{
$（“#附加银币”）。单击（函数（）{
log（'siver click'）；
$（'secu_silver'）.show（）；
$（'sec#u gold'）。隐藏（）；
$（'secu_platinum'）。隐藏（）；
返回false；
});
});
$（函数（）{
$（“#附加黄金”）。单击（函数（）{
$（'sec#u gold'）.show（）；
$（'secu_silver'）。隐藏（）；
$（'secu_platinum'）。隐藏（）；
返回false；
});
});
$（函数（）{
$（“#附加白金”）。单击（函数（）{
$（'sec#u白金'）。show（）；
$（'sec#u gold'）。隐藏（）；
$（'secu_silver'）。隐藏（）；
返回false；
});
});

两行解决方案怎么样

$('a').click(function () {
    $('div:contains('+$(this).text()+')').show();
    $('div:not(:contains('+$(this).text()+'))').hide();
});

---

两行解决方案怎么样

$('a').click(function () {
    $('div:contains('+$(this).text()+')').show();
    $('div:not(:contains('+$(this).text()+'))').hide();
});

---

我喜欢id/class模式。另外，通过添加一个类，您可以删除该内联样式。加：

.divclass{
    display: none
}

---

我喜欢id/class模式。另外，通过添加一个类，您可以删除该内联样式。加：

.divclass{
    display: none
}

---

要使用javascript执行此操作，请执行以下操作：

---

要使用javascript执行此操作，请执行以下操作：

---

是什么阻止你这么做？另外，您真的不需要三个

document.ready

事件处理程序，您只需要一个并将运行在

document.ready

上的所有代码放在一个事件处理程序中。是什么阻止您这么做？此外，您实际上不需要三个

document.ready

事件处理程序，您只需要一个并将运行在

document.ready

上的所有代码放在该事件处理程序中。