Question

HTML

<div class="testimony">
    <div class="container">
        <h1>WHAT PEOPLE SAY ABOUT ME</h1>
        <ul class="test-con">
            <li class="current">
                <a class="image-frame" href="">
                    <img src="images/testi-1-100x100.jpg">
                </a>
                <h5>“ Aenean nonummy hendrerit mau phasellu porta.... ”</h5>
                <h6>- Sam Owens</h6>
            </li>
            <li>
                <a class="image-frame" href="">
                    <img src="images/testi-1-100x100.jpg">
                </a>
                <h5>“ Aenean nonummy hendrerit mau phasellu porta.... ”</h5>
                <h6>- Matthews</h6>
            </li>
            <li>
                <a class="image-frame" href="">
                    <img src="images/testi-1-100x100.jpg">
                </a>
                <h5>“ Aenean nonummy hendrerit mau phasellu porta.... ”</h5>
                <h6>- Micheal</h6>
            </li>
        </ul>
        <ul class="navigator">
            <li class="current"></li>
            <li></li>
            <li></li>
        </ul>
    </div>

SCRIPT

$('.navigator li').click(function(){
    $(this).addClass('current').siblings().removeClass('current');
    $(this).each(function(){
        $('.test-con li').each(function(){
            var first= $('.test-con li:first-child');
            $(first).closest('li').addClass('current').siblings().removeClass('current');
        });
    });
});

我能够获得之前的li。有人可以使用li每项功能建议最佳结果吗？还是其他一些让我完美匹配的功能？我想在jQuery中这样做。提前谢谢。

Answer 1

<div class="testimony">
    <div class="container">
        <h1>WHAT PEOPLE SAY ABOUT ME</h1>
        <ul class="test-con">
            <li class="current">
                <a class="image-frame" href="">
                    <img src="images/testi-1-100x100.jpg">
                </a>
                <h5>“  mau phasellu porta Aenean nonummy hendrerit.... ”</h5>
                <h6>- Sam Owens</h6>
            </li>
            <li>
                <a class="image-frame" href="">
                    <img src="images/testi-1-100x100.jpg">
                </a>
                <h5>“ Aenean nonummy hendrerit mau phasellu porta.... ”</h5>
                <h6>- Matthews</h6>
            </li>
            <li>
                <a class="image-frame" href="">
                    <img src="images/testi-1-100x100.jpg">
                </a>
                <h5>“ hendrerit mau phasellu  Aenean nonummy porta.... ”</h5>
                <h6>- Micheal</h6>
            </li>
        </ul>
        <ul class="navigator">
            <li class="current"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
 </div>
$('.navigator li').click(function () {
        var index = $(this).index();
        $('.test-con li').hide();
    $('.test-con li').eq(index).addClass('current').fadeIn().siblings().removeClass('current');
    });

.test-con li{
    display:none;
}
.test-con li.current{
    display:inline-block;
}
.navigator li
{
    width:10px;
    height:10px;
    display:inline-block;
    margin-left:10px;
    background-color:#000;
}

Answer 2

您正在迭代$(this)这是错误的，因为$(this)是单个对象和对象列表。

您可以获取点击li的索引并使用相同的内容li显示test-con内的$(function(){..});。

使用下面的jQuery，最好将其包装在$(function(){ $('.navigator li').click(function(){ var index = $(this).index(); $(this).addClass('current').siblings().removeClass('current'); $('.test-con li').removeClass('current'); $('.test-con li:eq('+index+')').addClass('current'); }); });：

中

{{1}}

<强> Demo

点击不同的li时，jQuery会显示li

2 个答案: