如何在翻转时在UL中添加类并在LI中激活

ok what i want to do when rollover LI that time add class on ul and when it will active same to add class UL bellow like html structure

好吧我想要做什么当rollover LI那个时候在ul上添加类,什么时候它会激活同样添加类UL低于html结构

see my menu 如何在翻转时在UL中添加类并在LI中激活

看我的菜单

<ul>
     <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>Products</span></a></li>
      <li><a href="#"><span>Rentals</span></a></li>
      <li><a href="#"><span>Company</span></a></li>
       <li><a href="#"><span>Services</span></a></li>
      <li><a href="#"><span>Location</span></a></li>
      <li><a href="#"><span>Contact Us</span></a></li>
</ul>

so when rollover and active then code will be like

所以当翻转和活动然后代码就像

<ul class="active-1st">
  <li class="current"><a href="#"><span>Home</span></a></li>
          <li><a href="#"><span>Products</span></a></li>
....
</ul>

same when 2nd li rollover and active then

同样当第二次翻转并且活跃时

 <ul class="active-2nd">
      <li><a href="#"><span>Home</span></a></li>
              <li class="current"><a href="#"><span>Products</span></a></li>
    ....
    </ul>

the reason behind is. my navigation menu have background image that will effect whole UL area. that's why i want to change css by rollover and active.

背后的原因是。我的导航菜单有背景图像,将影响整个UL区域。这就是为什么我想通过翻转和活动来改变css的原因。

i can make this type menu by css skew transform but problem is that not support IE8. thats why i am choose this way change background image. i made Sprites image so via css i can change image position

我可以通过css skew transform制作这种类型的菜单,但问题是不支持IE8。这就是为什么我选择这种方式改变背景图像。我制作精灵图像所以通过CSS我可以改变图像位置

you guys can suggest me if have any other way

你们可以建议我,如果有任何其他方式

i am trying here http://jsfiddle.net/cyber007/vd28U/1/

我在这里尝试http://jsfiddle.net/cyber007/vd28U/1/

3 个解决方案

#1

I have understand you issue, i have made one jsFiddle for same http://jsfiddle.net/siddhapura/vd28U/2/

我理解你的问题,我为同一个http://jsfiddle.net/siddhapura/vd28U/2/制作了一个jsFiddle

I have use data property for this, so can assign any dynamic class to UL

我为此使用了data属性,因此可以将任何动态类分配给UL

HTML

<ul id="nav">
  <li><a href="#" data-ul-class="bg1"><span>Home</span></a></li>
  <li><a href="#" data-ul-class="bg2"><span>Products</span></a></li>
</ul>

$("#nav li a").on("mouseover",function(){

        $("#nav").addClass($(this).data('ul-class')) 
});
$("#nav li a").on("mouseout",function(){
        $("#nav").removeClass($(this).data('ul-class'));  
});

#2

Try this approach:

试试这种方法:

$(document).ready(function(){
    var num = $("#nav li").index($("#nav li.current"));  
    if (num > -1) { 
        $("#nav").addClass("bg"+num);
    }

    var cssClass = $("#nav").attr("class");
    $("#nav li a").on("mouseover",function(){
            var num = $("#nav li").index($(this).parent());
            $("#nav").removeClass(cssClass);  
            $("#nav").addClass("bg"+num);  
            showclass();
    }).on("mouseout",function(){
            var num = $("#nav li").index($(this).parent());
            $("#nav").removeClass("bg"+num);  
            $("#nav").addClass(cssClass);
            showclass();
    });
    showclass();
});

function showclass(){
    //debug
    $("#classinfo").html($("#nav").attr("class"));
}

#3

i am thinking if i can do like li nt way then would be work for me perfectly. like when 1st li class current then UL class bg1 when 2nd li class current then ul class bg2 something like . i will use that on wordpress. in wordpress easy to add to current class in active menu but so i am thinking like that way now li nt child way.

我在想,如果我能做到这样,那么就能完美地为我工作。比如当第1级锂电流然后UL级bg1当第2级锂电流然后ul级bg2之类的东西。我将在wordpress上使用它。在wordpress中很容易添加到活动菜单中的当前类,但所以我现在想像这样的方式现在儿童的方式。

#1