Скрыть и показать div на основе <a> нажав

Question

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

$(".a1").click(function() { 
    $(".div1").show("slow"); 
    $(".div2").hide("slow"); 
    $(".div3").hide("slow"); 
    $(".div4").hide("slow"); 
    return false; // avoid jump to '#' 
}); 

$(".a2").click(function() { 
    $(".div1").hide("slow"); 
    $(".div2").show("slow"); 
    $(".div3").hide("slow"); 
    $(".div4").hide("slow"); 
      return false; // avoid jump to '#' 
}); 

$(".a3").click(function() { 
    $(".div1").hide("slow"); 
    $(".div2").hide("slow"); 
    $(".div3").show("slow"); 
    $(".div4").hide("slow"); 
      return false; // avoid jump to '#' 
}); 

$(".a4").click(function() { 
    $(".div1").hide("slow"); 
    $(".div2").hide("slow"); 
    $(".div3").hide("slow"); 
    $(".div4").show("slow"); 
      return false; // avoid jump to '#' 
}); 

HTML

<a href="#" class="a1">man, whateva</a> 
<a href="#" class="a2">man, whateva</a> 
<a href="#" class="a3">man, whateva</a> 
<a href="#" class="a4">man, whateva</a> 



<div class="div1" id="div1">Health Research panel</div> 
<div class="div2" style="display:none;" id="div2">Healthcare Informatics</div> 
<div class="div3" style="display:none;" id="div3" >Public Health informatics</div> 
<div class="div4" style="display:none;" id="div4" >Capabilites</div> 

Answer 1

Если дать всем a элементов тот же класс, «.link», и все div элементов тот же класс, .content, вы можете использовать .index() для определения щелкнули a и нацеливают на соответствующий div.

$('.link').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var index = $('.link').index(this); 
 
    $('.content').filter(':visible').hide().end().eq(index).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" class="link">man, whateva</a> 
 
<a href="#" class="link">man, whateva</a> 
 
<a href="#" class="link">man, whateva</a> 
 
<a href="#" class="link">man, whateva</a> 
 

 

 

 
<div class="content" id="div1">Health Research panel</div> 
 
<div class="content" style="display:none;" id="div2">Healthcare Informatics</div> 
 
<div class="content" style="display:none;" id="div3" >Public Health informatics</div> 
 
<div class="content" style="display:none;" id="div4" >Capabilites</div>

Answer 2

Дайте им все тот же класс и применить метод:

$(".common_class").click(function() { 
    $(".div1").hide("slow"); 
    $(".div2").hide("slow"); 
    $(".div3").hide("slow"); 
    $(".div4").show("slow"); 
      return false; // avoid jump to '#' 
}); 

---

Даже короче, но нужно назначить показать/скрыть для дивы:

$(".common_class").click(function() { 
    $(".hide").hide("slow"); 
    $(".show").show("slow"); 
      return false; // avoid jump to '#' 
}); 

Answer 3

Если divs должны отображаться или скрываться вместе, они могут иметь общий класс, который вы можете использовать для ссылки на них вместе.

Javascript:

$(".a4").click(function(){ 
    $(".showgroup").hide("slow"); 
}); 

HTML:

<div class="div1 showgroup" id="div1"/> 
<div class="div2 showgroup" id="div2"/> 

Answer 4

Вы могли бы дать вашим DIVS каждый идентификатор такого как 1_div и класс DIV, то вы могли бы сделать что-то вроде этого:

HTML

<a href="#" id="1">man, whateva</a> 
<a href="#" id="2">man, whateva</a> 
<a href="#" id="3">man, whateva</a> 
<a href="#" id="4">man, whateva</a> 

<div id="1_div" class="div">Health Research panel</div> 
<div id="2_div" class="div" style="display:none;" id="div2">Healthcare Informatics</div> 
<div id="3_div" class="div" style="display:none;" id="div3" >Public Health informatics</div> 
<div id="4_div" class="div" style="display:none;" id="div4" >Capabilites</div> 

Затем в JQuery:

$(document).ready(function(){ 
    $(".div").click(function(){ 
    var num = $(this).id; 
    $(".div").hide('slow'); 
    $("#"+num+"_div").show('slow'); 
    }); 
}); 

Answer 5

Вы можете создать глобальную DIV для ваших ссылок и ваши дивы и добавить атрибут данных для вашей ссылки

DEMO

HTML

<div id="links"> 
    <a href="#" class="a1" data-id="1">man, whateva</a> 
    <a href="#" class="a2" data-id="2">man, whateva</a> 
    <a href="#" class="a3" data-id="3">man, whateva</a> 
    <a href="#" class="a4" data-id="4">man, whateva</a> 
</div> 

<div id="divs"> 
    <div class="div" id="div1">Health Research panel</div> 
    <div class="div" style="display:none;" id="div2">Healthcare Informatics</div> 
    <div class="div" style="display:none;" id="div3" >Public Health informatics</div> 
    <div class="div" style="display:none;" id="div4" >Capabilites</div> 
</div> 

Javascript

$(document).ready(function() { 
    $("#links a").on('click', function(e) { 
     e.preventDefault(); 

     var $this = $(this), 
      id = $this.data("id"); 

     $(".div").hide("slow"); 
     $("#div" + id).show("slow"); 
    }); 
}); 

Answer 6

использование attribute start with selector в JQuery

$("a[class^=a]").click(function (e) { 
    e.preventDefault(); 
    var last = this.className.slice(-1); 
    $("[class^=div]").hide(); 
    $(".div" + last).show(); 

}); 

DEMO

Answer 7

Я согласен с другими ответы здесь, а я бы связать связь с DIV через data- атрибут , Я думаю, ясно, что ассоциация:

SO мой HTML может быть:

<a href="#" class="a1" data-div="div1">man, whateva</a> 
<a href="#" class="a2" data-div="div2">man, whateva</a> 
<a href="#" class="a3" data-div="div3">man, whateva</a> 
<a href="#" class="a4" data-div="div4">man, whateva</a> 


$(function(){ 

    $('a').click(function(e) { 
     e.preventDefault(); 
     var that = $(this); 

     $('div').hide(); 
     $('.'+that.attr('data-div')).show(); 
    }); 
}); 

P.S. Я использую a и div здесь для примера. Я предполагаю, что у вас был бы общий класс для <a> или <a> в разделе, таком как <nav> или <div>.

Answer 8

вы также можете использовать CSS решение использовать pseudo элемент :target

Единственное, что я изменил добавляется цель для a тег и изменить порядок первого DIV к последнему, так что я могу скрыть элемент щелчком другого предназначаться

#div2, #div3, #div4, #div2:target ~ #div1, #div3:target ~ #div1, #div4:target ~ #div1 { 
 
    display: none; 
 
} 
 
#div1:target, #div2:target, #div3:target, #div4:target { 
 
    display: block; 
 
} 
 

<a href="#div1" class="a1">man, whateva</a> 
 

 
<a href="#div2" class="a2">man, whateva</a> 
 

 
<a href="#div3" class="a3">man, whateva</a> 
 

 
<a href="#div4" class="a4">man, whateva</a> 
 

 
<div class="div2" id="div2">Healthcare Informatics</div> 
 
<div class="div3" id="div3">Public Health informatics</div> 
 
<div class="div4" id="div4">Capabilites</div> 
 
<div class="div1" id="div1">Health Research panel</div>