javascript - 花式菜单代码不起作用，当 anchor 标记类激活时

Question

我有一个菜单代码。当我们将鼠标悬停在它上面时，矩形背景会根据鼠标光标进行动画处理，并在鼠标移开时移回事件链接。当 li 标签的类被激活时，它工作正常。但是我需要 anchor 标记才能激活类。

现场演示:http://insicdesigns.com/demo/css3/exp1/index.html

请看下面的代码:

<div id="cmwmenu1" class="ddsmoothmenu ddcmwmenu" >
  <ul>
    <li class="active"><a href="">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Back to Article</a></li>
    <li><a href="#">How it Works?</a></li>
  </ul>
  <div class="floatr"></div>
</div>

现场演示运行良好，但请查看他们的代码。他们有类 active 来列出标签。我的要求是在 anchor 中有 active 标签，而不是 li。如果我确实改变了，那么这个脚本就不起作用了。我希望它像下面的格式和适用于下面代码的 javasript。

<li><a class="active" href="">Home</a></li>

Javascript:

$(document).ready(function () {

  var dleft = $('#cmwmenu1 li.active').offset().left - $('#cmwmenu1').offset().left; 
  var dwidth = $('#cmwmenu1 li.active').width() + "px";

  $('.floatr').css({
      "left": dleft+"px",
      "width": dwidth
  });


  $('li').hover(function(){

      var left = $(this).offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
      var width = $(this).width() + "px";
      var sictranslate = "translate("+left+"px, 0px)";


      $(this).parent('ul').next('div.floatr').css({
          "width": width,
          "-webkit-transform": sictranslate,
          "-moz-transform": sictranslate
      });

  },

  function(){

      var left = $(this).siblings('li.active').offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
      var width = $(this).siblings('li.active').width() + "px";

      var sictranslate = "translate("+left+"px, 0px)";

      $(this).parent('ul').next('div.floatr').css({
          "width": width,
          "-webkit-transform": sictranslate,
          "-moz-transform": sictranslate

      });

  })

});

CSS:

#cmwmenu1 {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
}
a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
ul li {
    list-style: none;
    float:left;

    text-align: center;
    }
ul li a {
    padding: 0 20px;
    text-align: center;
    }
.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

Answer 1

怎么样this

var li = $('li');
li.click(function(){
    $this = $(this);
    li.removeClass('active').find('a').removeClass('active');
    $this.addClass('active').find('a').addClass('active');
})