Question

我有多个称为“<代码>.details的散射机,我想对他们适用以下点击功能。但是,现在,如果我点上了一条电线,那么所有电离层名称都在整个称为<代码>的圆形/代码上发生变化。我如何将点击功能运用到目前的<代码>.details div?

$(document).ready(function() {
    $( .details div.two ).hide();
    $( .details div.three ).hide(); 

    $( .details ul li.one ).click(function () { 
        $(this).addClass( active );
        $( .details ul li.two ).removeClass( active );
        $( .details ul li.three ).removeClass( active );
        $( .details div.one ).show();
        $( .details div.two ).hide();
        $( .details div.three ).hide(); 
    });
    $( .details ul li.two ).click(function () { 
        $(this).addClass( active );
        $( .details ul li.one ).removeClass( active );
        $( .details ul li.three ).removeClass( active );
        $( .details div.one ).hide();
        $( .details div.two ).show();
        $( .details div.three ).hide(); 
    });
    $( .details ul li.three ).click(function () {   
        $(this).addClass( active );
        $( .details ul li.one ).removeClass( active );
        $( .details ul li.two ).removeClass( active );
        $( .details div.one ).hide();
        $( .details div.two ).hide();
        $( .details div.three ).show(); 
    });
});

传真

<div class="details">
    <ul>
        <li class="one active"><span>Nav 1</span></li>
        <li class="two"><span>Nav 2</span></li>
        <li class="three"><span>Nav 3</span></li>
    </ul>
    <div class="one">
        <p>Content 1</p>
    </div>
    <div class="two">
        <p>Content 2</p>
    </div>
    <div class="three">
        <p>Content 3</p>
    </div>                                                                          
</div>

CSS

.active {background:#fff;}

Answer 1

http://api.jquery.com/closest/“rel=“nofollow”>>closest,然后在find<>a>:

$( .details ul li.one ).click(function () { 
    $(this).closest( .details )
           .find( ul li ).removeClass( active ).end()
           .find( div.two, div.three ).hide().end()
           .find( div.one ).show();
    $(this).addClass( active );
});

同样,对另外两人也是如此。

您可以进一步清理全方位,然后只需要一个<条码>。不要说三;就像这样。

$( .details ul li ).click(function () {
    var $this    = $(this);
    var $details = $this.closest( .details );
    var idx      = $details.find( li ).index(this);
    $details.find( ul li ).removeClass( active ).end()
            .find( div:not(:eq(  + idx +  )) ).hide().end()
            .find( div:eq(  + idx +  ) ).show();
    $(this).addClass( active );
});

Demo: http://jsfiddle.net/ambiguous/2zYt3/

Answer 2

您可使用<条码> 封顶,以找到与<条码>详细内容/代码”相近的祖先,并用于找到适当的要素。

例如:

$( .details ul li.two ).removeClass( active );

将:

$(this).closest( .details ).find( ul li.two ).removeClass( active );

Answer 3

我这样说:

<div class="details">
    <ul>
        <li class="one active" data-divclass="one"><span>Nav 1</span></li>
        <li class="two" data-divclass="two"><span>Nav 2</span></li>
        <li class="three" data-divclass="three"><span>Nav 3</span></li>
    </ul>
    <div class="one">
        <p>Content 1</p>
    </div>
    <div class="two">
        <p>Content 2</p>
    </div>
    <div class="three">
        <p>Content 3</p>
    </div>                                                                          
</div>  

<script type= javascript >

    $(document).ready(function() {
        $( .details ul li ).click(function () { 
            var $this=$(this);
            $( .details ul li ).removeClass( active );
            $this.addClass( active );
            $( div.details div ).hide();
            $( div.details div. +$this.data( divclass )).show();
        });
    });

</script>

。 CSS

.active {background-color: #999;}
div.two, div.three {display: none;}

demo page - 。

友情链接