Question

我有这个清单：

<ul class="pagination">
    <li class="dl-nav-1 current"><a href="#">Spring Training 2001</a><span class="visible"><img src="img/indicator.png" alt="" /></li>
    <li class="dl-nav-2"><a href="#">NFL 2011</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li>
    <li class="dl-nav-3"><a href="#">Fantasy Baseball</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li>
</ul>

我需要在li类为最新时显示<span>，并在不为最新时隐藏<span>。

有一个JS插件可以更改li类，因此当它更改为当前时，使<span>可见，当它删除当前时，隐藏<span>

可怕的尝试：

$(function) () {
    if($(ul.pagination li).hasClass("current")) {
        $("ul.pagination li.current span").removeClass("visible").addClass("hidden");
    } 
    else{
        $("ul.pagination li.current span").removeClass("hidden").addClass("visible")
    }

};

Answer 1

你只需要javascript来切换类，CSS可以做其余的事情：

ul.pagination li.current span {
    display:inline;
}

ul.pagination li span {
    display:none;   
}

然后，使用Justin808的例子，你可以为javascript做这样的事情：

function ToggleIndicator(liClass) {
    $('.'+liClass).toggleClass('current');
}

$('#clickme').click(function() { ToggleIndicator('dl-nav-3');});

分叉Justin808的jsfiddle，你得到这个：http://jsfiddle.net/uwTEZ/1/

Answer 2

使用jQuery，您可以轻松地从元素中添加/删除此类，如下所示：

$('.dl-nav-1').find('span').addClass('visible');
$('.dl-nav-2').find('span').removeClass('visible').addClass('hidden');

在将一个列表项设置为当前列表项之前，可以更轻松地重置所有列表项：

$('.pagination').children().find('span').removeClass('visible').addClass('hidden');

Answer 3

Here是一个基于您的类隐藏和显示的示例。每次更改类时，请调用“UpdateIndicators”函数。

更新：

如果您想通过javascript更新指标，here就是一个带切换功能的示例。

Answer 4

获取'当前'li：

的Li [类$ =电流]

http://weblogs.asp.net/stevewellens/archive/2011/02/13/jquery-selector-tester-and-cheat-sheet.aspx

隐藏或显示当前，jQuery

4 个答案: