Question

我在制作这个工作时遇到了一些麻烦。

基本上，我有2个无序列表。我需要点击第一个列表中的某个链接，并在第二个列表中显示您的等价物......但是......为什么我不知道，这不起作用。

我的CSS：

.banner_list{
    width: auto;
    height: auto;
    overflow: hidden;
}

    .banner_list li{
        display: none;
    }

我的结构：

<div id="tec_medals">
    <ul>
        <li><a href="#" class="active">ACTIVE</a></li>
        <li><a href="#" class="flex">FLEX</a></li>
        <li><a href="#" class="mais_alto">MAIS ALTO</a></li>
        <li><a href="#" class="massagem">MASSAGEM</a></li>
        <li><a href="#" class="sense">SENSE</a></li>
    </ul>
</div>

<div id="banner" class="banner_tecnologia">
    <ul class="banner_list">
        <li class="active">ACTIVE OK</li>
        <li class="flex">FLEX OK</li>
        <li class="mais_alto">MAIS ALTO OK</li>
        <li class="massagem">MASSAGEM OK</li>
        <li class="sense">SENSE OK</li>
    </ul>
</div>

和我的剧本：

$('.banner_list li').first().css('display', 'block');

$('#tec_medals a').click( function(event) {
    event.preventDefault();
    var tec_atual = $(this).attr('class');
    console.log(tec_atual);
    $('.banner_list li').fadeOut();
    $('.banner_list').find('class', tec_atual).css('display','block').fadeIn();
});

我的小提琴：http://jsfiddle.net/4HF8Z/

Answer 1

Here is working demo

试试这个：

$('.banner_list li').first().show();

$('#tec_medals a').click( function(event) {
    event.preventDefault();
    $('.banner_list li').hide();
    $('.banner_list').find('.' + $(this).attr('class')).show(); // Change here
});

Answer 2

您不必像这样使用.find();找到您的班级选择器，只需将.添加到您的班级名称tec_atual，然后就完成了：

试试这个

$('#tec_medals a').click( function(event) {
    event.preventDefault();
    var tec_atual = $(this).attr('class');
    console.log(tec_atual);
    $('.banner_list li').fadeOut();
    $('.banner_list').find('.' + tec_atual).css('display','block').fadeIn(); // Change here
});

Fiddle Demo

Answer 3

此处无需使用find。您可以这样做：

$('.banner_list li').first().css('display', 'block');

$('#tec_medals a').click(function (event) {
    event.preventDefault();
    var tec_atual = $(this).attr('class');
    console.log(tec_atual);
    $('.banner_list li').fadeOut();
    $(".banner_list ." + tec_atual).css('display', 'block').fadeIn();//change here
});

jsfiddle

Answer 4

这是一种更准确的方法。当您链接.css('display', 'block')时，也不需要fadeIn()。 Fiddle is available as well

$('.banner_list li').first().css('display', 'block');

$('#tec_medals a').click( function(event) {
    event.preventDefault();
    var tec_atual = $(this).attr('class');
    console.log(tec_atual);
    $('.banner_list li').fadeOut();
    $('.banner_list').find("li."+tec_atual).fadeIn();
});

单击另一个</li>时显示<li>元素

4 个答案: