Отображение контента на основе ссылки нав щелкнул

Question

У меня есть выбор меню, который выглядит следующим образом:

<ul class = "menu"> 
    <li><a href="#about" class="aboutNav">About</a></li> 
    <li><a href="#contact" class="contactNav">Contact</a></li> 
    <li><a href="#misc" class="miscNav">Misc</a></li> 
</ul> 

Я пытаюсь сделать содержание, связанное с каждым из этих ссылок показывать по щелчку и скрыть все остальное содержимое. JS я использую выглядит следующим образом:

$('.menu li .aboutNav').click(function (e) { 
    e.preventDefault(); 
    $('.wrapper').hide(); 
    $('.misc').hide(); 
    $('.contact').hide(); 
    $('.about').show();}); 

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

Я только начал изучать html, js, css, чтобы я мог идти по этому пути неправильно, и поэтому другие потоки не помогли.

EDIT: Вот Pastebin всего моего HTML http://pastebin.com/FjcNXGkY

Answer 1

Более эффективным способом было бы добавить один и тот же класс для всех звеньев и еще один класс для всех элементов контента ...

HTML:

<ul class="menu"> 
    <li><a href="#about" class="menu-btn">About</a></li> 
    <li><a href="#contact" class="menu-btn">Contact</a></li> 
    <li><a href="#misc" class="menu-btn">Misc</a></li> 
</ul> 

<div class="menu-content about">About</div> 
<div class="menu-content contact">Contact</div> 
<div class="menu-content misc">Misc</div> 

JavaScript:

var $content = $('.menu-content'); 

function showContent(type) { 
    // this assumes that you really must select 
    // the content using a class and not an ID (which you've 
    // referenced in the href) 
    $content.hide().filter('.' + type).show(); 
} 

$('.menu').on('click', '.menu-btn', function(e) { 
    // get the type to pass to showContent by grabbing 
    // the hash from the anchor href and removing the first 
    // character (the #) 
    showContent(e.currentTarget.hash.slice(1)); 
    e.preventDefault(); 
}); 

// show 'about' content only on page load (if you want) 
showContent('about'); 

Демо на jsbin: http://jsbin.com/hagonesuwo/edit?html,js,output

------------------- ------------------ EDIT ----------------------------- --------

Я только что видел ваше редактирование со ссылкой на ваш pastebin. Если есть только один элемент контента для каждого навигационного элемента, то вы можете использовать идентификаторы вместо ...

HTML:

<ul class="menu"> 
    <li><a href="#about" class="menu-btn">About</a></li> 
    <li><a href="#contact" class="menu-btn">Contact</a></li> 
    <li><a href="#misc" class="menu-btn">Misc</a></li> 
</ul> 

<div id="about" class="menu-content">About</div> 
<div id="contact" class="menu-content">Contact</div> 
<div id="misc" class="menu-content">Misc</div> 

JavaScript:

var $content = $('.menu-content'); 

function showContent(selector) { 
    $content.hide(); 
    $(selector).show(); 
} 

$('.menu').on('click', '.menu-btn', function(e) { 
    showContent(e.currentTarget.hash); 
    e.preventDefault(); 
}); 

// show '#about' content only on page load (if you want) 
showContent('#about'); 

Это было бы гораздо лучше, так как это будет означает, что навигация по-прежнему будет переходить на соответствующий контент, если JS был отключен или не был загружен по какой-либо причине.

Answer 2

Это решение предполагает, что a элементы будут иметь только один класс.

$('.menu li a').click(function (e) { 
    e.preventDefault(); 
    $(".wrapper,.misc,.content,.about").hide(); // Hide all. 
    $("." + this.className.slice(0,-3)).show(); // Show one based on the class 
}); 

Он связывает один и тот же обработчик для всех a элементов.

При нажатии кнопки он скрывает все целевые элементы, а затем отделяет "Nav" от .className, чтобы создать селектор, чтобы выбрать тот, который будет отображаться.

Не уверен, что .wrapper делает, так как это не в вашем HTML.

Answer 3

$(".menu").children().click(function(){ 
    $(".menu").children(function(){ 
     $("."+$(this).attr("class").replace("Nav","")).hide(); 
    }) 
    $("."+$(this).attr("class").replace("Nav","")).show(); 
}) 

Это универсальное решение, учитывая, что вы можете иметь любой пункт меню с классом «someItemNav»; если щелкнуть, все элементы скрыты, и отображается только «someItem».

Answer 4

У вас есть несколько проблем с JS:

• вы выбираете детали класса .misc вместо ID #misc

• , как вы закодированы щелчок очень жесткие. Сделать его более упругим, как:

  $('.menu').on('click', 'li', function (e) { 
      $('article').hide(); 
      var id = $(this).find('a').attr('href'); // $(this) is the clicked LI 
      $(id).show();  
  }) 
  

Я предполагаю, что все элементы с идентификаторами #about, #contact и т.д. просто article HTML элементы и я скрыть их все, прежде чем показывать правильный. Надеюсь это поможет.

EDIT

Или даже немного более элегантно скрывается другое содержимое:

$('.menu').on('click', 'li', function (e) { 
    var id = $(this).find('a').attr('href'); 
    $(id).show().siblings().hide();  
})