修改现有问题答案

Question

只是一个简短的问题。我是这个网站的新手，但是这个链接 Show/Hide multiple DIVs with Select using jQuery

我只是想知道如何更改代码，使其不在下拉选择中，而是在实际链接中。

如果有人能帮助我那就太棒了！

我到处都找过了，这是我能找到的最接近的。

谢谢大家。哇！

Answer 1

我修改了这个问题的接受答案 how to show/hide divs by select .(jquery) OP链接的问题只是为了让他可以看到两者之间的相似之处。正如有人指出的那样，这种命名约定根本不好。

标记

<a id="1" href="#">Link one</a>
<a id="2" href="#">Link two</a>
<a id="3" href="#">Link three</a>


<div id="div1">content here 1</div>
<div id="div2">content here 2</div>
<div id="div3">content here 3</div>    

JS

$(function(){
    $('#div1, #div2, #div3').hide();

    $('a').click(function() {
       $('#div1, #div2, #div3').hide();
       $('#div' + $(this).attr('id')).show();
    });
}

演示
http://jsfiddle.net/kJGcE/

这里有一个更好的方法

标记

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


<div class="divShow">content here 1</div>
<div class="divShow">content here 2</div>
<div class="divShow">content here 3</div>

JS

$('a.divHide').click(function() {
   $('.divShow').hide();
   $('.divShow').eq($(this).index()).show();
});

演示
http://jsfiddle.net/kJGcE/2/