JQuery Show/Hide On Link Issue

Question

У меня, похоже, проблема, что я не могу найти ответ.

У меня есть 5 ссылок Href на странице, где все имеют соответствующий идентификатор контейнера div. При щелчке я хочу скрыть все контейнеры Div, кроме контейнера с идентификационным номером, соответствующим ссылке.

У меня есть следующий HTML:

<div class="sidebar1"> 
<ul class="nav"> 
<li> 
- <a href="#" onclick="show1">1</a> 
- <a href="#" class="show2">2</a> 
- <a href="#" onclick="show3">3</a> 
- <a href="#" onclick="show4">4</a> 
- <a href="#" onclick="show5">5</a> - 
</li></ul> 
     <div id="1">1111</div> 
     <div id="2">2222</div> 
     <div id="3">3333</div> 
     <div id="4">4444</div> 
     <div id="5">5555</div> 
    </div> 

Я тогда функции настроить. Я попытался подключиться через Class и Onclick, как вы увидите выше/ниже.

Сценарий:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#2").hide(); 
     $("#3").hide(); 
     $("#4").hide(); 
     $("#5").hide(); 
    }) 

    function show1() { 
     $("#2").hide(); 
     $("#3").hide(); 
     $("#4").hide(); 
     $("#5").hide(); 
     $("#1").show(); 
    }; 

    $('.show2 a').click(function() { 
     $("#2").show(); 
     $("#3").hide(); 
     $("#4").hide(); 
     $("#5").hide(); 
     $("#1").hide(); 
    }); 
</script> 

Заранее спасибо

Answer 1

fiddle Demo

Изменены HTML

<ul class="nav"> 
    <li> 
     - <a href="#" data-id="1">1</a> //data-id to get target id 
     - <a href="#" data-id="2">2</a> 
     - <a href="#" data-id="3">3</a> 
     - <a href="#" data-id="4">4</a> 
     - <a href="#" data-id="5">5</a> - 
    </li> 
</ul> 

JS

$(document).ready(function() { 
    var div_all = $("#1,#2,#3,#4,#5"); //cache all div's 
    div_all.not('#1').hide(); //hide all but not element with id 1 
    $('ul.nav a').click(function() { //user click on a tag inside ul with class nav 
     var id = $(this).data('id'); //get data-id attribute to get target id 
     div_all.hide();//hide all div's 
     $('#' + id).show(); //show the current target div 
    }); 
}); 

---

.data()

.not()

---

http://www.w3.org/TR/html5/dom.html#the-id-attribute

Примечание: Там нет никаких других ограничений на то, что образуют идентификатор может принимать; в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинают с подчеркиванием, состоят только знаки препинания и т.д.

Answer 2

Вы можете использовать классы, чтобы сделать то, что вы хотите сделать, без необходимости вводить из всех этих селекторов:

<div class="ShowDiv">1111</div> 
    <div class="ShowDiv">2222</div> 
    <div class="ShowDiv">3333</div> 
    <div class="ShowDiv">4444</div> 
    <div class="ShowDiv">5555</div> 
    ... 

затем на ваш обработчик щелчка

$('.ShowDiv').click(function() { 
    $(this).show();     //show the div that was clicked 
    $('.ShowDiv').not(this).hide(); //hide all other divs in that class 
});//$('.ShowDiv').click(function() {