Question

确定我想要做什么时翻转LI那个时候在ul上添加类，什么时候它会活动同样添加类UL如html结构

查看我的菜单 enter image description here

<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>

所以当翻转和活动时，代码就像

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

当第二个li翻转并且活动时

相同

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

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

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

如果有其他方式，你们可以建议我

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

Answer 1

我理解你的问题，我为同一个http://jsfiddle.net/siddhapura/vd28U/2/

制作了一个jsFiddle

我为此使用了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>

<强> JS

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

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

Answer 2

尝试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"));
}

Answer 3

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

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

3 个答案: