Question

我希望能够点击链接并显示div部分，是否有简单的jQuery解决方案？

e.g。点击一个将显示div-one，并隐藏div-two＆amp; div-three，click two将显示div-two并隐藏div-one和div-three

<div class="div-one" >
one
</div>

<div class="div-two" style="display: none">
two
</div>

<div class="div-three" style="display: none">
three
</div>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

Answer 1

如果您的主播只有一个课程，那么您可以这样做：

$('a').click(function(e) {
    e.preventDefault();
    var cls = $(this).prop('class');
    $('.div-'+cls).show().siblings('div').hide();    
});

<强> Fiddle Demo

或给你的锚一个数据属性：

<a href="#" data-target="div-one" class="one">one</a>
<a href="#" data-target="div-two" class="two">two</a>
<a href="#" data-target="div-three" class="three">three</a>

然后你可以这样做：

$('a').click(function(e) {
    e.preventDefault();
    var cls = $(this).attr('data-target');
    $('.'+cls).show().siblings('div').hide();    
});

<强> Fiddle Demo

Answer 2

试试这个

<a href="#" class="one" onclick="show_div(this)">one</a>
<a href="#" class="two" onclick="show_div(this)">two</a>
<a href="#" class="three" onclick="show_div(this)">three</a>
<script>
function show_div(el){
 $('.div-'+el.className).toggle(); // toggle could be replaced with show()/hide()
}
</script>

Answer 3

检查实时jsFiddle

HTML

<div class="buttons">
<a  id="showall">All</a>
<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Menu1</div>
<div id="div2" class="targetDiv">Menu2</div>
<div id="div3" class="targetDiv">Menu3</div>
<div id="div4" class="targetDiv">Menu4</div>

JQuery的

 jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
});

Answer 4

您可以使用jQuery轻松实现目标。请在下面找到执行此操作的方法 -

jQuery("a").click(function() {
   jQuery("div").hide();
    if(this.className == 'one')
        jQuery(".div-one").show();
    if(this.className == 'two')
        jQuery(".div-two").show();
    if(this.className == 'three')
        jQuery(".div-three").show();
});

尝试演示 - http://jsfiddle.net/yrM3H/1356/

Answer 5

您可以在jquery中使用show（）和hide（）函数来实现此目的。

。

$（ “的dev_name”）隐藏（）; //隐藏div $（“。div name”）。show（）; //显示div

Answer 6

您可以使用css类：

我已经为锚和相应的div使用了相同的类。我使用了2个css类（隐藏和显示）。

当点击锚标记时：< - 我删除了之前div的show class并添加了hide class - 我添加了show class并删除了类名的相应div的隐藏。

HTML：

<div class="div-one show" >
one
</div>

 <div class="div-two hide" style="display: none" >
two
</div>

<div class="div-three hide" style="display: none">
three
</div>

<a href="#" class="div-one">one</a>
<a href="#" class="div-two">two</a>
<a href="#" class="div-three">three</a>

JQUERY：

$(document).ready(function(){
    $("a[class^='div-']").click(function(e){
        e.preventDefault();
        strClass= $(this).attr('class');
        $(".show").removeClass("show").addClass("hide");
        $("div."+strClass).removeClass("hide").addClass("show");

    })
});

jsFiddle

隐藏和显示div的

6 个答案:

检查实时jsFiddle

HTML

JQuery的