jquery - アクティブなdivを持つdivのJquery fadeIn fadeOutリスト

Question

私が達成しようとしているのは、いくつかの個別の div を持つリンクのリストです。現時点では、フェードは機能していますが、「クリックでジャンプ」しており、両方<ul id="links">でアクティブであり、#description適切に機能していません。私を手伝ってくれますか？

ここに私の例があります：

http://jsfiddle.net/mdamC/100/

Answer 1

H、私はあなたがこれをすることをお勧めします。

また、理想的なコードにはページごとに一意の ID が必要であるため、説明からクラスに変更されました

http://jsfiddle.net/mdamC/104/

html

<ul id="links">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul><br/><br/>
<div id="description">
<ul class="descriptions">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
<ul class="descriptions">
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
</ul>

<ul class="descriptions">
    <li>3</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
</ul>
<ul class="descriptions">
    <li>4</li>
    <li>4</li>
    <li>4</li>
    <li>4</li>
    <li>4</li>
</ul>
<ul class="descriptions">
    <li>5</li>
    <li>5</li>
    <li>5</li>
    <li>5</li>
    <li>5</li>
</ul></div>

CSS

.active{color:red}

#description{position:relative}
.descriptions{position:absolute; top:0px;}

JS

$("ul#links li").unbind().bind('click', function(e) {
    if (e)
        e.preventDefault();
    $(this).toggleClass('active');
    $("ul.descriptions").fadeOut();

    var index = $(this).index();;
    $("ul.descriptions").eq(index).fadeIn();

    if (!e) e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}, function(e) {
    $("ul.descriptions").stop().fadeOut();
});



$("ul.descriptions").hide();
if ($(this).next().is(':hidden')) {
    $(this).next().removeClass('active');
}

$('ul#links li').click(function(e) {
    e.preventDefault();
    $('ul#links li').removeClass('active');
    $(this).addClass('active');
});

Answer 2

どうぞ

http://jsfiddle.net/mdamC/102/