JQuery Show / Hide On Link Issue

Question

JQuery Show / Hide On Link Issue

0

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

У меня есть 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>

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

Aitken91 30 нояб. 2013, в 03:21

Источник

0

Так какой у тебя вопрос? С чем конкретно вам нужна помощь?
PM 77-1 30 нояб. 2013, в 02:26

Теги:

jquery

html

2 ответа

Ещё вопросы

Так какой у тебя вопрос? С чем конкретно вам нужна помощь?

Mark · Answer 1 · 2013-11-30T00-52-00.000Z

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

  <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 () {

Tushar Gupta · Answer 2 · 2013-11-30T00-42-00.000Z

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
    });
});

.данные()

.не()

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

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