Question

http://jsfiddle.net/BXNE9/1/我想通过锚点使用相关链接打开div。当我点击相关div显示的链接时，但当我点击其他链接时，前一个div也显示。

我想通过锚点在相关链接上打开div，但是当我点击其他链接时，前一个div需要关闭。所有链接和相关div都相同。请帮帮我

Answer 1

您需要隐藏点击回调中的所有div，如此

var tabs = $('ul.menu li a');

    tabs.bind('click',function(event){
        var $anchor = $(this);
        var ids = tabs.each(function(){
           $($(this).attr('href')).hide();   
        });
        $($anchor.attr('href')).fadeIn('slow');
        event.preventDefault();
    });

此处http://jsfiddle.net/joycse06/BXNE9/2/

当用户点击链接时，我首先使用$.each循环隐藏所有div。

Answer 2

或者你可以这样做..将css类分为父div和

<div style="width:1000px; height:450px; margin-top:50px;">

<div style="width:350px; height:250px; margin:0 auto;" class="test">
<div id="firstDiv" style="background:#03F; width:350px; height:250px; float:left; display:none;">First Div</div>
<div id="secondDiv" style="background:#06F; width:350px; height:250px; float:left; display:none;">Second Div</div>
<div id="thirdDiv" style="background:#09F; width:350px; height:250px; float:left; display:none;">Third Div</div>
<div id="fourthDiv" style="background:#0CF; width:350px; height:250px; float:left; display:none;">Fourth Div</div>
</div>

js code ..

$(document).ready(function() {

    var tabs = $('ul.menu li a');

    tabs.bind('click',function(event){
        var $anchor = $(this);
        $(".test div").fadeOut('slow');
        $($anchor.attr('href')).fadeIn('slow');

        event.preventDefault();
    });


});

Jsfiddle为此......

Answer 3

另一种可能的解决方案是将一个类或id放在围绕淡入元素的div上：

<div style="width:1000px; height:450px; margin-top:50px;">

<div class="fadein" style="width:350px; height:250px; margin:0 auto;">

    <div id="firstDiv" style="background:#03F; width:350px; height:250px; float:left; display:none;">First Div</div>
    <div id="secondDiv" style="background:#06F; width:350px; height:250px; float:left; display:none;">Second Div</div>
    <div id="thirdDiv" style="background:#09F; width:350px; height:250px; float:left; display:none;">Third Div</div>
    <div id="fourthDiv" style="background:#0CF; width:350px; height:250px; float:left; display:none;">Fourth Div</div>

</div>

然后使用.children隐藏它们，然后再淡入新的：

$(document).ready(function() {

    var tabs = $('ul.menu li a');

    tabs.bind('click',function(event){
        $('.fadein').children().hide();
        var $anchor = $(this);
        $($anchor.attr('href')).fadeIn('slow');
        event.preventDefault();
    });


});

http://jsfiddle.net/BXNE9/4/

jQuery multi div show使用锚点隐藏函数

3 个答案: