1

JSF中。我想在当前活动的 div 上添加类。我知道我需要使用 addClass() 但我不知道我必须在哪里使用它？

html:

<div class="myclass selected">
Content 1
</div>
<div class="myclass">
    Content 2
</div>
<div class="myclass">
Content 3
</div>

<ul>
  <li><img     src="http://www.lillehammer.com/ImageVault/Images/id_2122/scope_66/ImageVaultHandler.aspx"     /></li>
  <li><img     src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Valued_image_seal.svg/40px-            Valued_image_seal.svg.png" /></li>
  <li><img src="http://www.iconico.com/i/icoImageFilterPro100.gif" /></li>
</ul>

<a class="next">next</a>

jQuery：

$('img', 'ul').on('click', function() {
    $(".myclass").eq($(this).parent('li').index()).show()
                 .siblings('div').hide();
});

$('.selected').show();

$(".next").click(function(){
    if ($('.myclass:visible').length) {
        var curr = $('.myclass:visible'),
            next = curr.next('.myclass').length?    curr.next('.myclass'):$('.myclass').first();

        curr.hide();
        next.show();
    }else{
        $('.myclass').first().show();
    }
});

​ ​</p>

4

4 回答 4

3

您是否打算突出显示li当前处于活动状态的内容？http://jsfiddle.net/b3VaX/50/

您的代码很好，但是如果您的 css 专注于突出显示和显示，您的 javascript 只需担心切换 css 类以获取活动元素。

setActive(0);

$('li').click(function() {
    setActive($(this).index());
});

$(".next").click(function(){
    var current = $('ul li.selected').index(),
        maxIndex = $('ul li').length - 1,
        next = (current + 1) >  maxIndex ? 0 : (current + 1);

    setActive(next);
});

function setActive(i) {
    var li = $('ul li').eq(i);

    $('ul li').removeClass('selected');
    li.addClass('selected');
    $('.myclass').removeClass('selected');
    $('.myclass').eq(i).addClass('selected');
}

​

CSS：

.myclass.selected {
    display: block;
}

ul li.selected {
    background-color: yellow;
}
于 2012-08-25T01:57:42.270 回答
0

不完全确定您实际上要在哪里添加/删除类，但请看一下：

$(".next").click(function(){
    if ($('.myclass:visible').length) {
        var curr = $('.myclass:visible'),
            next = curr.next('.myclass').length?curr.next('.myclass'):$('.myclass').first();

        curr.hide().removeClass('someClassHere');
        next.show().addClass('someOtherClassHere');
    }else{
        $('.myclass').first().show();
    }
});

JSFiddle

于 2012-08-25T01:32:49.167 回答
0

听起来您正在尝试向您正在显示的元素添加一个类并将其从您正在隐藏的元素中删除。这应该做到这一点：http: //jsfiddle.net/cjc343/b3VaX/15/

我所做的更改非常简单：在您的每个点击事件中，当您显示（）某些内容时，会添加“选定”类，而当您隐藏（）某些内容时，它会被删除。

于 2012-08-25T01:44:43.833 回答
0

也许这就是你想要做的 http://jsfiddle.net/unloco/b3VaX/39/

CSS：

li.active img{border:1px solid red}

首先，“激活”第一个 li，

$('ul#myul li:first').addClass('active');

然后点击激活下一个：

$('ul#myul li.active').removeClass('active').next().addClass('active').length ||
$('ul#myul li:first').addClass('active');
于 2012-08-25T01:49:50.160 回答