1

.selectedjquery を使用してナビゲーション メニューに状態を追加しようとしています。頑張っているのはわかりますが、やっぱりスタイルは「とどまらない」ですね。クリックすると白くなるはずです。

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

リンクをクリックするとページが更新されます。それらを次から変更します。

<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 ;   
       });
});
于 2012-10-16T14:47:01.823 に答える
0

これは、クリック イベントの後、クリックされたページが開き、ページ全体がリロードされるためです。クリック後は完全に別ページです。

実際に何をしようとしているのかわかりませんが、ページがhtmlの場合はselected、htmlファイルにクラスを設定する必要があります

product.html 用

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

別のdivを表示したり、AJAXでロードしたりするなど、JSでコンテンツをロードしている場合。event.preventDefault();addClass 関数の後に使用する必要があります。

編集:ロード後にクラスを選択する場合は、次のようにしてください:

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

うまくいくといいのですが、テストできませんでした。

于 2012-10-16T14:47:33.063 に答える
0

他のコメント投稿者がすでにそれをカバーしていると確信しているため、これはあなたの質問への回答ではありません。私が言いたいのは、あなたの CSS コードが少しごちゃごちゃしていたので整理したということです。また、接頭辞のない CSS3 プロパティを常に接頭辞付きのプロパティの下に配置する必要があります (つまり、 の下に配置する必要がありますborder-radius: 5px;) -webkit-border-radius: 5px;。これにより、ブラウザー ベンダーが接頭辞付きのバージョンを削除した場合 (最近のほとんどのブラウザーは、多くの CSS3 のものに接頭辞を使用しなくなりましたborder-radius。ただし、ブラウザの古いバージョンのプレフィックス付きバージョンを含める必要があります)。プレフィックスなしのバージョンは、廃止されたプレフィックス付きのバージョンを上書きします。

第二に、あなたは CSS の効率を大幅に向上させる短縮形の CSS をあまり使用していないようです。たとえば、、、などをbackground: /* code */カバーできます。Shorthand CSS の詳細については、こちらをお読みください。background-imagebackground-positionbackground-sizebackground-color

于 2012-10-16T15:01:38.013 に答える