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

你可以给你的div各自一个id，如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 3

给他们所有相同的课程并应用你的方法：

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

更短但需要为div分配show / hide：

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

Answer 4

如果div应该全部显示或隐藏在一起，它们可以有一个共同的类，可以用它们一起引用它们。

使用Javascript：

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

HTML：

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

Answer 5

您可以为链接和div创建全局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

在jquery中使用 attribute start with selector

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

});

<强> DEMO

Answer 7

我同意其他答案，但我会通过data-attribute将链接与div相关联。我认为很清楚这种关联是什么：

我的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

您还可以使用pseudo元素:target

来使用css解决方案

我唯一改变的是为a标签添加目标并将第一个div的顺序更改为最后，以便我可以隐藏其他目标点击的元素

＆＃13;

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

＆＃13;

<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>

＆＃13;

隐藏和显示基于<a> clicked</a>的div

8 个答案: