隐藏并显示div的

Question

I would like to be able to click on a link and for it to show the div section, is there an easy jQuery solution?

eg click on one will show div-one, and hide div-two & div-three, click two will show div-two and hide div-one and 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

If your anchor only has one class then you can do:

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

Fiddle Demo

or give your anchor a data attribute:

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

then you can do:

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

Fiddle Demo

Answer 2

try this

<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

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

You can achieve your goal easily using jQuery. Please find the way to do this below -

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();
});

Try Demo - http://jsfiddle.net/yrM3H/1356/

Answer 5

You can use show() and hide() functions in jquery to achive this.

$(".div_name").hide(); // to hide div $(".div_name").show(); // to show div

Answer 6

You can use css class for this:

I have used same class for anchor and corresponding div. I have used 2 css classes(hide and show).

when some click in the anchor tag:
-- i have removed show class of previous div and added hide class.
-- i have added show class and removed hide of corresponding div by class name.

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