сделать простой скрипт для кнопки скрытия / показа использования в jquery

Question

Я новичок и не помню всех скриптов в jquery.

я хочу, чтобы у моего div / hide у меня был более простой скрипт. не нравится мой сценарий:

<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

Я не знаю, что на самом деле требуется, но попробуйте это

<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 2

Это не намного проще, чем у вас.

Вы можете объединить два .hide звонка в один, но это все:

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

Answer 3

Имея еще несколько 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.

Answer 4

Хорошо, вы можете подготовить свои div с атрибутом data-, чтобы сделать его более простым.Например:

<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

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

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

это если вы хотите показать и скрыть элемент.