Переключить несколько классов

Question

Я застрял в меню, которое я хотел бы добавить на свой сайт. я разветвленный свою работу в:

1. Коммерческой
2. Моды
3. Music
4. Портрет

Так у меня есть меню, как эта выше. Когда я нажимаю на один раздел, скажем, «Коммерческий», я хочу, чтобы все остальные отображались: нет.

Посмотрите на этот FIDDLE: http://jsfiddle.net/bfevLsj2/8/

$(document).ready(function(){ 
    $("#commercial").click(function(){ 
    $(".commercial").toggleClass("show"); 
    $(".fashion").toggleClass("hid"); 
    $(".music").toggleClass("hid"); 
    $(".portrait").toggleClass("hid"); 
    }); 
    }); 

Любая помощь будет принята с благодарностью. ФРС.

Answer 1

HTML:

<div id="commercial" class="menuItem"><a href="#">Commercial</a></div> 
<div id="fashion" class="menuItem"><a href="#">Fashion</a></div> 
<div id="music" class="menuItem"><a href="#">Music</a></div> 
<div id="portrait" class="menuItem"><a href="#">Portrait</a></div><br /> 

<div class="commercial content">C</div> 
<div class="fashion content">F</div> 
<div class="music content">M</div> 
<div class="portrait content">P</div> 

JavaScript:

$(document).ready(function(){ 
    $(".menuItem").click(function(){ 
     var id = this.id; 
     $('.content').removeClass('show').addClass('hid'); 
     $('.'+id).addClass('show').removeClass('hid'); 
    }); 
}); 

CSS:

.hid { 
    display:none; 
} 
.show { 
    display:block; 
} 

Fiddle

Answer 2

Вы могли бы, что более легко, как:

<div class="link" id="commercial"><a href="#">Commercial</a></div> 
<div class="link" id="fashion"><a href="#">Fashion</a></div> 
<div class="link" id="music"><a href="#">Music</a></div> 
<div class="link" id="portrait"><a href="#">Portrait</a></div><br /> 

<div class="commercial elem">C</div> 
<div class="fashion elem">F</div> 
<div class="music elem">M</div> 
<div class="portrait elem">P</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".link").click(function(){ 
      var id = $(this).attr('id'); 
      $('.elem').hide(); 
      $('.' + id).show(); 
     }); 
    }); 

</script> 

Answer 3

Вы должны siblings() ширина С Jquery

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

$("[id]").click(function(){ //onclick on element with ID 
 
    var selected = $(this).attr("id"); // save the value of that ID 
 
    $("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="commercial"><a href="#">Commercial</a></div> 
 
<div id="fashion"><a href="#">Fashion</a></div> 
 
<div id="music"><a href="#">Music</a></div> 
 
<div id="portrait"><a href="#">Portrait</a></div><br /> 
 

 
<div class="commercial">C</div> 
 
<div class="fashion">F</div> 
 
<div class="music">M</div> 
 
<div class="portrait">P</div>

НО лучший подход должен был бы использовать data-*

$("[data-tab]").click(function(){ 
 
    var current = $(this).attr("data-tab"); 
 
    $("[data-content="+ current +"]").show().siblings("[data-content]").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div data-tab="commercial"><a href="#">Commercial</a></div> 
 
<div data-tab="fashion"><a href="#">Fashion</a></div> 
 
<div data-tab="music"><a href="#">Music</a></div> 
 
<div data-tab="portrait"><a href="#">Portrait</a></div><br /> 
 

 
<div data-content="commercial">C</div> 
 
<div data-content="fashion">F</div> 
 
<div data-content="music">M</div> 
 
<div data-content="portrait">P</div>

СНОВА лучше использовать Чистый JavaScript

function runClick (event) { 
 
    var current = this.getAttribute("data-tab"); 
 
    for(var content = 0; content < dataContent.length; content++) { 
 
     dataContent[content].style.display = "none" 
 
    } 
 
    document.querySelector("[data-content="+ current + "]").style.display = "block" 
 
} 
 

 
var dataTabs = document.querySelectorAll("div[data-tab]"), 
 
    dataContent = document.querySelectorAll("div[data-content]"); 
 

 
for(var tab = 0; tab < dataTabs.length; tab++){ 
 
    dataTabs[tab].addEventListener("click", runClick , false); 
 
}

<div data-tab="commercial"><a href="#">Commercial</a></div> 
 
<div data-tab="fashion"><a href="#">Fashion</a></div> 
 
<div data-tab="music"><a href="#">Music</a></div> 
 
<div data-tab="portrait"><a href="#">Portrait</a></div><br /> 
 

 
<div data-content="commercial">C</div> 
 
<div data-content="fashion">F</div> 
 
<div data-content="music">M</div> 
 
<div data-content="portrait">P</div>

Answer 4

Have a look at this fiddle, think it's what you want

По сути вы можете использовать .toggle(), чтобы пройти и показать/скрыть согласно ли это тот, который вы хотите показывать.

$(function(){ 
// find all the links that you can click 
    $("div.clickable a").click(
     function(e){ 
      // when they're clicked, find the identifier of the tab/div you want shown 
      var clickedId = $(e.target).parent("div").attr("id"); 

      // traverse all of the divs and show/hide according to whether it's the tab you want 
      $("div.section").each(function(index, div){ 
       $(div).toggle($(div).hasClass(clickedId)); 
      }); 
     }); 
}); 

И HTML:

<div id="commercial" class="clickable"><a href="#">Commercial</a></div> 
<div id="fashion" class="clickable"><a href="#">Fashion</a></div> 
<div id="music" class="clickable"><a href="#">Music</a></div> 
<div id="portrait" class="clickable"><a href="#">Portrait</a></div><br /> 

<div class="commercial section">C</div> 
<div class="fashion section">F</div> 
<div class="music section">M</div> 
<div class="portrait section">P</div> 

НТН

---

Edited добавить "ALL" ссылка в this fiddle

$("div.clickable a").click(
     function(e){ 
      // when they're clicked, find the identifier of the tab/div you want shown 
      var clickedId = $(e.target).parent("div").attr("id"); 

      // traverse all of the divs and show/hide according to whether it's the tab you want 
      $("div.section").each(function(index, div){ 
       $(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL"); 
      }); 
     }); 

После добавления этого к списку интерактивные divs:

<div id="ALL" class="clickable"><a href="#">ALL</a></div>