Hide/Show different links

问题:

I have a script that works on one link on jsfiddle.

I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/

It works to show and hide but i cant make it show one and other. It shows everything.

If i press Link one I want to show ".open-container-One" And if I press Link two i just want to show "open-container-Two"

Hope you understand my issue.

jsCode:

$(document).ready(function() {
    var $div = $('.test');
    var height = $div.height();
    $div.hide().css({
        height: 0
    });

    $('a').click(function() {
        if ($div.is(':visible')) {
            $div.animate({
                height: 0
            }, {
                duration: 500,
                complete: function() {
                    $div.hide();
                }
            });
        } else {
            $div.show().animate({
                height: height
            }, {
                duration: 500
            });
        }

        return false;
    });
});​

回答1:

Although I like @adeneo's answer, I prefer this method using selectors rather than elements :

$(".test").hide();
$('.list a').each(function(i) {
    $(this).on("click", function() {
        $(".test").slideUp(0).eq(i).slideDown(400, function() {
            $(".close a").on("click", function() {
                $(".test").slideUp();
            }); // on click close
        }); // after slideDown (shown div)
    }); // on click link
}); // each 

The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.

See JSFIDDLE

回答2:

Get the index from the clicked anchor, in this case that would have to be the wrapping li, and then use that index to select the right one in the collection of .test elements. No need to recreate the slideUp/Down already built into jQuery.

$(function() {
    var elems = $('.test').hide();

    $('a').click(function(e) {
        e.preventDefault();
        var selEl = elems.eq($(this).closest('li').index());
        selEl.slideToggle(600);
        elems.not(selEl).slideUp(600);
    });
});​

FIDDLE

回答3:

Give class to the anchor tag,

<a href="#" class="link1">Link 01</a>
 <a href="#" class="link2">Link 02</a>

give the appropriate class as id to the div tag as

<div id="link1" class="test">
...
...
</div>

<div id="link2" class="test">
...
...
</div>

Do the below change in your javascript function

$('a').click(function() {

         $('div.test').hide();
        var showDivClass = $(this).attr("class");
        $("#" + showDivClass).show().animate({
                height: height
            }, {
                duration: 500
            });
        $('div.test').not("#" + showDivClass).hide().animate({
                height: 0
            }, {
                duration: 500
            });

    });

Update and test.

回答4:

Please provide the id to anchor tag which will be same as the class you need to show/hide. and replace the $div with the id tag