Простое шоу / скрыть проблемы JQuery

Question

Любая помощь по этой проблеме будет принята с благодарностью. У меня основная навигация вот так:

<ul>
  <li><a href="">Nav 1</a></li>
  <li><a href="">Nav 2</a></li>
  <li><a href="">Nav 3</a></li>
  <li><a href="">Nav 4</a></li>
 </ul>

Где-то внизу есть раздел содержимого, такой как:

<div id="content">
  <div class="block-1">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-2">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-3">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-4">
    <p>Lorem ipsum</p>
  </div>
</div>

У #content div есть дисплей: нет; установить в таблице стилей. Как и каждый из блоков внутри него. Когда кто-то щелкает элемент навигации, я хотел бы, чтобы он отображал контейнер содержимого, и только этот блок соответствует ему. Nav1 = block-1 и т. Д. ... Когда вы нажимаете другую ссылку, она скрывает другую и показывает новый выбор.

Есть идеи?

Answer 1

Чтобы быть немного более гибким (чтобы вам не нужно было сопоставлять индексы и т. Д.), Я рекомендую что-то вроде этого.

$(document).ready(function(){
    $('#nav > li > a').click(function(ev){
        ev.preventDefault();
        var elementToShow = $(this).attr('href');
        $(elementToShow).slideDown().parent().slideDown().find(' > :not('+elementToShow+')').slideUp();
    });
});

Это также будет работать со скрытым элементом содержимого.

Вот jsFiddle

Answer 2

сначала немного измените ваш html.

<ul id="nav">
  <li><a href="#block-1">Nav 1</a></li>
  <li><a href="#block-2">Nav 2</a></li>
  <li><a href="#block-3">Nav 3</a></li>
  <li><a href="#block-4">Nav 4</a></li>
</ul>

<div id="content">
  <div id="block-1">
    <p>Lorem ipsum</p>
  </div>
  <div id="block-2">
    <p>Lorem ipsum</p>
  </div>
  <div id="block-3">
    <p>Lorem ipsum</p>
  </div>
  <div id="block-4">
    <p>Lorem ipsum</p>
  </div>
</div>

далее, не скрывайте содержимое div. Тогда вы можете сделать это.

$('#nav li a').click(function() {
    $('.content div').hide();
    var block = $(this).attr('href');
    $(block).show();
    });

Answer 3

Первый : не скрывать содержимое DIV. Это не нужно и только усложняет отображение / скрытие блоков DIV.

Секунда : измените DIV на это:

<div id="content">
  <div class="block-1 block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-2 block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-3 block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-4 block">
    <p>Lorem ipsum</p>
  </div>
</div>

Затем измените LI на что-то вроде этого:

<li><a href="" onClick='$(".block").hide();$(".block-1").show()'>Nav 1</a></li>
<li><a href="" onClick='$(".block").hide();$(".block-2").show()'>Nav 2</a></li>
<li><a href="" onClick='$(".block").hide();$(".block-3").show()'>Nav 3</a></li>
<li><a href="" onClick='$(".block").hide();$(".block-4").show()'>Nav 4</a></li>

Сначала будут скрыты все блоки контента, а затем показан тот, который вы хотите показать.

Answer 4

Я написал быстрый JSFiddle для вас.Используя метод jQuery .index(), вы можете получить индекс нажатой ссылки и использовать его для отображения правильного div.Я использовал класс в следующем коде, чтобы показать / скрыть ваш div.Вы можете заменить это дополнительным кусочком логики, например, для постепенного исчезновения каждого div.

Еще один момент, который вам нужно сделать, это то, что вам не нужны постфиксы -1, -2 и т. Д. В div;index() и селектор :eq() справится с этим за вас.Я немного изменил ваш HTML, и вот JS:

JavaScript

$(document).ready(function() {
    $("ul a").click(function() {
        var index = $(this).parent().index();

        $("div#content").find(".show").removeClass("show");
        $("div#content").find(".block:eq(" + index + ")").addClass("show");
    });
});

HTML

<ul>
  <li><a href="#">Nav 1</a></li>
  <li><a href="#">Nav 2</a></li>
  <li><a href="#">Nav 3</a></li>
  <li><a href="#">Nav 4</a></li>
 </ul>

<div id="content">
  <div class="block">
    <p>Lorem ipsum 1</p>
  </div>
  <div class="block">
    <p>Lorem ipsum 2</p>
  </div>
  <div class="block">
    <p>Lorem ipsum 3</p>
  </div>
  <div class="block">
    <p>Lorem ipsum 4</p>
  </div>
</div>

---

В ответ на комментарии, вотпример обновления, который будет скрывать каждый элемент при нажатии на первый li.Чтобы сделать его более универсальным, вы можете добавить класс (скажем, hideall) к li и использовать .hasClass("hideall") внутри if() вместо index == 0, который проверяет, является ли это первым li в списке. JSFiddle здесь , JS ниже.Я немного отредактировал HTML в Fiddle.

$(document).ready(function() {
    $("ul a").click(function() {
        var index = $(this).parent().index();
        console.log(index);

        if(index == 0)
        {
            $("div#content > div").removeClass("show");
        }
        else
        {
            index--;
            $("div#content").find(".show").removeClass("show");
            $("div#content").find(".block:eq(" + index + ")").addClass("show");
        }
    });
});

Answer 5

То, что вы хотите, это вкладки jQuery: http://jqueryui.com/demos/tabs/