使用Jquery更改INACTIVE div类

发布于 2024-11-26 12:27:39 字数 807 浏览 1 评论 0原文

你建议我如何去做这件事？

我有一个菜单，默认情况下突出显示（提供活动类）到 div 列表中的第一个 div。我需要发生的是：当您位于父 div（列出其他 div、列表）内时，会出现正常的悬停操作。当您离开父 div 时，最后突出显示的 div 将保持活动状态。有道理吗？有点？

这是我到目前为止所拥有的。 catListInner1 是其他 div 的父级 div。

var aCl = jQuery.noConflict();
aCl(document).ready(function() {

    //takes the initial active class off of the first div. 
aCl("#catListInner1").live({
    mouseenter: function() {
        aCl("#catListInner1 div:first").removeClass().addClass('catListOther');
    }

}); 


aCl(".catListOther").live({
    mouseenter: function(e) {
    //  aCl("#catListInner1 div:first-child").removeClass('catListAct');
        aCl(this).removeClass().addClass('catListAct');
    },
    mouseleave: function(e){
        aCl(this).removeClass().addClass('catListOther');
    },
}); 
});

原文

How would you suggest I go about this?

I have a menue that by default highlights (gives the active class) to the first div in a list of divs. What I need to happen is this: while you are within the parent div (that lists the other divs, the list) there is normal hover action. When you leave the parent div the last highlighted div stays in the active state. Make sense? Kinda?

Here is what I have so far. catListInner1 is the parent div where the others are grouped.

var aCl = jQuery.noConflict();
aCl(document).ready(function() {

    //takes the initial active class off of the first div. 
aCl("#catListInner1").live({
    mouseenter: function() {
        aCl("#catListInner1 div:first").removeClass().addClass('catListOther');
    }

}); 


aCl(".catListOther").live({
    mouseenter: function(e) {
    //  aCl("#catListInner1 div:first-child").removeClass('catListAct');
        aCl(this).removeClass().addClass('catListAct');
    },
    mouseleave: function(e){
        aCl(this).removeClass().addClass('catListOther');
    },
}); 
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清晰传感 2024-12-03 12:27:39

我不知道我是否理解正确，但您想要的是在悬停时突出显示一个元素（在本例中为 div），并且只有在悬停同一类的另一个元素时才删除此突出显示？
如果是这种情况，我会这样做：

$('element').mouseenter(function(){
    $('element.class').removeClass('class');
    $(this).addClass('class');
});

它的作用是，从所有元素中删除悬停类，并应用于当前悬停的元素。当鼠标离开当前元素时，不会发生任何事情。

I don't know if I understand this right, but what you want is to highlight an element on hover (div in this case), and only remove this highlight if you hover another element of the same class?
If that's the case, here's what I'd do:

$('element').mouseenter(function(){
    $('element.class').removeClass('class');
    $(this).addClass('class');
});

What this does is, remove the hover class from all elements, and apply to the currently hovering element. When the mouse leaves the current element, nothing happens.

回复收藏 0 原文

往事风中埋 2024-12-03 12:27:39

这就是最终对我有用的::

var aCl = jQuery.noConflict();
aCl(document).ready(function() {
var currentId

aCl(".catListOther").live({ 
    mouseenter: function(e) {

            aCl('.catListAct').not(aCl(this)).removeClass().addClass('catListOther');
        aCl(this).removeClass().addClass('catListAct');
        currentId = aCl(this).attr('id'); //get the ID of the last div you visited
    }
}); 

aCl(".catListAct").live({
    mouseleave: function(e){
        aCl(this).removeClass().addClass('catListOther');

    },
}); 

aCl('#catList').live('mouseleave', function() {
    aCl("#" + currentId).removeClass().addClass('catListAct'); 
          //when leaving parent div, add the class back to the last div you visited in the list
});
});

this is what ended up working for me::

var aCl = jQuery.noConflict();
aCl(document).ready(function() {
var currentId

aCl(".catListOther").live({ 
    mouseenter: function(e) {

            aCl('.catListAct').not(aCl(this)).removeClass().addClass('catListOther');
        aCl(this).removeClass().addClass('catListAct');
        currentId = aCl(this).attr('id'); //get the ID of the last div you visited
    }
}); 

aCl(".catListAct").live({
    mouseleave: function(e){
        aCl(this).removeClass().addClass('catListOther');

    },
}); 

aCl('#catList').live('mouseleave', function() {
    aCl("#" + currentId).removeClass().addClass('catListAct'); 
          //when leaving parent div, add the class back to the last div you visited in the list
});
});

回复收藏 0 原文

~没有更多了~