在jquery中为隐藏/显示使用按钮做一个简单的脚本

Question

我是一个初学者，不记得jQuery中的所有脚本。

我想要做的就是让我的hide/show div有更简单的脚本。 不喜欢我的脚本：

<div id="aaa"> 
<div id="bbb"> 
<div id="ccc"> 

<button id="bt1"> 
<button id="bt2"> 
<button id="bt3"> 

$("#bt1").click(function){ 
    $("#aaa").show(); 
    $("#bbb").hide(); 
    $("#ccc").hide(); 
    }); 

and so on... 

感谢

Answer 1

function hideAll(){ 
    $("#bbb,#ccc,#aaa").hide(); 
} 

$("#bt1").click(function){ 
//hide 
    hideAll(); 
//show 
$("#aaa").show(); 
}); 

，如果你想显示和隐藏要素即是。

Answer 2

它不会比你有什么要简单得多。

你可以你的两个.hide呼叫组合成一个，但仅此而已：

$("#bbb,#ccc").hide(); 

Answer 3

我不知道什么是真正需要的，但是尝试这个

<button id="bt1"> 
<div id="aaa"> 
<button id="bt2"> 
<div id="bbb"> 
<button id="bt3"> 
<div id="ccc"> 




$("#bt1,#bt2,#bt3").click(function(){ 
    $("#aaa,#bbb,#ccc").hide(); 
    $(this).next().show(); 
}); 

Answer 4

好了，你可以用data-属性准备div s到使它更容易。例如：

<div id="aaa" data-btn="bt1">Content #1</div> 
<div id="bbb" data-btn="bt2">Content #2</div> 
<div id="ccc" data-btn="bt3">Content #3</div> 

<button class="content-btn" id="bt1">Show #1</button> 
<button class="content-btn" id="bt2">Show #2</button> 
<button class="content-btn" id="bt3">Show #3</button>​ 

现在只是按照我的意见：

$('button.content-btn').click(function() { 
    // [data-btn^=...] mean "attr data-btn start with..." 
    // First hide all contents 
    var contents = $('div[data-btn^=bt]'); 
    contents.hide(); 

    // Now store the button id clicked 
    var show = $(this).attr('id'); 

    // Now find and show the content that combine with the button id 
    var content = $('div[data-btn=' + show + ']'); 
    content.show(); 
});​ 

可以发现JSFiddle一个活生生的例子。

Answer 5

多带几个HTML属性，你可以做一个单一的点击功能是这样的：

<div class="someclass" id="aaa"></div> 
<div class="someclass" id="bbb"></div> 
<div class="someclass" id="ccc"></div> 

<button id="bt1" rel="aaa">show only aaa</button> 
<button id="bt2" rel="bbb">show only bbb</button> 
<button id="bt3" rel="ccc">show only ccc</button> 

的JavaScript：

$('button').click(function(){ 
    $('.someclass').hide(); 
    $('#' + $(this).attr('rel')).show(); 
}); 

（注：太固定的语法错误）

您也可以使用HTML 5 data-属性和jQuery.data来读取它们，而不是rel。