jQuery 在点击不同的 li 时显示一个 li

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>

脚本

$('.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。有人可以建议使用每个函数的最佳结果吗？或者其他一些可以让我完美匹配的功能？我想在 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;
}