1

我正在尝试.selected使用 jquery 向我的导航菜单添加一个状态。我可以看到它正在努力工作，但说到底，风格并没有“停留”。点击后它应该是白色的。

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");


       });
          });
4

3 回答 3

0

When you click on links page is refreshed. Change them from :

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

to

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

If you want to test without refresh page.

EDIT : you can also changeyour javascript file to :

$(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 ;   
       });
});
于 2012-10-16T14:47:01.823 回答
0

It is because after click event the clicked page opens and reloads entire page. it is completely another page after the click.

I am not sure what you actually try to do but if your pages are html, you should set the selected class in html file

for product.html

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

if you are load the content by JS such as displaying another div or load by AJAX. You should use event.preventDefault(); after the addClass function.

EDIT: If you want to select class after load try something like this :

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

Hope it works I couldn t test it.

于 2012-10-16T14:47:33.063 回答
0

这不是对您的问题的回答，因为我很确定其他评论者已经涵盖了这一点。我只想说，我整理了你的 CSS 代码，因为它有点乱。此外，您应该始终将未加前缀的 CSS3 属性放在带前缀的 CSS3 属性下（即border-radius: 5px;应该放在 下-webkit-border-radius: 5px;），这样当浏览器供应商放弃带前缀的版本时（大多数现代浏览器不再使用前缀来处理很多 CSS3 内容，border-radius包括在内。不过，您仍然应该为旧版本的浏览器添加前缀版本。），无前缀版本将覆盖过时的前缀版本。

其次，您似乎并没有大量使用速记 CSS，这可以大大提高 CSS 的效率。例如，background: /* code */可以涵盖background-image、background-position、background-size等background-color。阅读此内容以获取有关速记 CSS 的更多信息。

于 2012-10-16T15:01:38.013 回答