Question

我正在尝试使用jquery将.selected状态添加到导航菜单中。我可以看到它正在尝试工作，但毕竟说完了，风格并没有“停留”。点击后它应该是白色的。

HTML ：

<ul id="coolMenu">


  <li class="end"><a href="index.html"></a></li>
  <li class="mid"><a href="products.html">products</a>
    <ul class="mama">
        <li class="uno"><a href="http://www.preworkoutforwomen.com"
   onclick="_gaq.push(['_link', 'http://www.preworkoutforwomen.com']); return false;">Athena PreWorkout</a></li>
    </ul>
    </li>

  <li class="midx"><a href="unico_fitness_blog.html">u.blog</a> </li>
  <li class="midx"><a href="unico_athletes.html">athletes</a></li>
    <li class="midx"><a href="aboutus.html">about us</a></li>
  <li class="midx"><a href="contact.html">contact</a>  </li>
  <li class="shop"><a href="http://mgfyb.pkhqw.servertrust.com/">shop</a>  </li>
</ul>

CSS ：

#coolMenu {
    list-style: none; 
    float:left; 
    padding-left:7.5px; 
    padding-right:0px; 
    position:relative;
}

#coolMenu ul  {
    -webkit-box-shadow: 0px 3px 3px 0px #4a4a4a;
    border-bottom-left-radius:5px;
    -moz-border-bottom-left-radius:5px;
    -moz-box-shadow: 0px 3px 3px 0px #4a4a4a;
    box-shadow: 0px 3px 3px 0px #4a4a4a; 
}

#coolMenu .selected {
    background-position:bottom !important; 
    color:black !important;
}

#coolMenu li {   
    width:145px;
    height:48px;
    display:inline-block;
    float:left;
    background-image:url(../images/misc/images/retina-sprite_03.png);
   -webkit-background-size: 750px 150px;
   -o-background-size: 750px 150px;
   -moz-background-size: 750px 150px;
   background-size: 750px 150px;
    background-position: -301px -1px;
   -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

#coolMenu > li.end {
    border-bottom-left-radius:7px;
    -moz-border-bottom-left-radius:7px;
    border-top-left-radius:7px;
    -moz-border-top-left-radius:7px;
    background-position: -601px -1px;       
    text-align:center;
}

#coolMenu > li.shop {
    text-align:center;
    border-left-style:ridge;
    border-left-color:#333;
    border-left-width:thin;
    border-bottom-right-radius:7px;
    -moz-border-bottom-right-radius:7px;
    border-top-right-radius:7px;
    -moz-border-top-right-radius:7px;
}

#coolMenu > li.mid {
    text-align:center;
    border-left-style:ridge;
    border-left-color:#333;
    border-left-width:thin;
}

#coolMenu > li.midx {
    text-align:center;
    border-left-style:ridge;
    border-left-color:#333;
    border-left-width:thin;
}

#coolMenu li a {
    display: block;
    height: 2.4em;
    line-height: 2.1em;
    padding: 0px;
    text-decoration: none;
}

#coolMenu uno,dos,tres a {
    display: block;
    height: .5em;
    line-height: 1em;
    padding: 0px;
    text-decoration: none;
}

#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
    padding: 0px;
}

#coolMenu ul li {
}

#coolMenu ul li a { 
}

#coolMenu li:hover ul.noJS {
    display: block; 
}

的Javascript ：

$(document).ready(function(){
        $("#coolMenu li").click(function() {
        //  First remove class "active" from currently active tab
        $("#coolMenu li").removeClass('selected, end, mid, midx, shop'); 


        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("selected");


       });
          });

Answer 1

点击链接页面时刷新。改变它们：

<li class="end"><a href="index.html"></a></li>

到

<li class="end"><a href="index.html" onclick="return false"></a></li>

如果您想在没有刷新页面的情况下进行测试。

编辑：您还可以将您的javascript文件更改为：

$(document).ready(function(){
        $("#coolMenu li").click(function() {
             //  First remove class "active" from currently active tab
             $("#coolMenu li").removeClass('selected, end, mid, midx, shop'); 


             //  Now add class "active" to the selected/clicked tab
             $(this).addClass("selected");

             //CHANGED
             return false ;   
       });
});

Answer 2

这是因为点击事件后，点击的页面会打开并重新加载整个页面。点击后它完全是另一页。

我不确定你真正尝试做什么，但如果你的网页是html，你应该在html文件中设置selected类

for product.html

    <li class="selected"><a href="products.html">products</a>

如果您通过JS加载内容，例如显示另一个div或由AJAX加载。您应该在addClass函数之后使用event.preventDefault();。

编辑：如果您想在加载后选择类，请尝试以下方法：

$(document).ready(function(){
    $("#coolMenu li a").each(function () {
           if (location.href.indexOf(this.href) > -1)
           {
                $(this).parent().attr("class", "selected");
                return false;
           }
     });
});

希望它有效我无法测试它。

Answer 3

这不是你的问题的答案，因为我很确定其他评论者已经涵盖了这个问题。我只是想说，我整理了你的CSS代码，因为它有点混乱。另外，你应该总是将未加前缀的CSS3属性放在带前缀的CSS3属性下（即border-radius: 5px;应该在-webkit-border-radius: 5px;下），以便当浏览器供应商删除前缀版本时（大多数现代浏览器不使用前缀更多的CSS3内容，包括border-radius。你应该仍然包括旧版浏览器的前缀版本。），未加前缀的版本将覆盖过时的前缀版本。

其次，你似乎没有使用速记CSS，这可以大大提高CSS的有效性。 E.g background: /* code */可以涵盖background-image，background-position，background-size，background-color等。有关简写CSS的详情，请阅读this。

li.selected菜单有问题

3 个答案: