0

アニメーション化されたナビゲーション ボタンがあり、実際には 1 つの要素を除いてすべてを css で設定できます。矢印。実際のライブページはこちら。

http://sclarkstudio.com/testing/mm/index.htm

現在のページで矢印を表示して静的にしようとしています。クラスが .arrow に設定されているときに矢印をアニメーション化するホバー スクリプトがあり、クラスが .currenta に設定されているときに静的で表示されます。

<body id="@@id@@"> <!-- in this case "home" -->

<nav class="sidebar1">
<ul class="navbox">
    <li class="navBtn">
        <div class="slider on"></div>
        <a id="BtnText" class="navButton home"href="index.htm">Home</a>
        <div id="arrow" class="arrow"></div>
    </li>
    <li class="navBtn">
        <div class="slider on"></div>
        <a id="BtnText" class="navButton news"href="news.htm">News</a>
        <div id="arrow" class="arrow"></div>

and so on...



 </ul>
</nav>

私が書こうとしているスクリプトは、矢印divのクラスを「.currenta」に変更するだけです

var bodyID = $("body").attr("id");
var url = window.location;

$(function() {

$('nav ul li a #BtnText').each(function(){
var myHref = $(this).attr('href');
if( url == myHref) {
    $(this).closest('div','#arrow').css('currenta');
} 
});
});

私はこれを理解しようとして髪を引っ張ってきましたが、最高のコーダーではありません。

4

2 に答える 2

0

最初 : ID は一意である必要があります。そのIDで見つかった最初の要素のみを取得します

2番目: クラスを追加するにはaddClass()を使用します

3 番目:window.location決して == あなたhrefのコードは実行されません。を使用して、hrefが含まれているかどうかを確認したいindexOf

4 番目: クラス名で要素を取得できます。

$('.arrow').each(function(){
     var $this = $(this);
     if(window.location.indexOf($this.siblings('a.navButton').attr('href')) > -1){  //
         $this.removeClass('arrow').addClass('currenta');  
         // I think you wanted to remove the arrow class.. if not just remove it
     }
});

http://jsfiddle.net/9x9uF/

于 2012-08-03T20:10:38.120 に答える
0

まず、idページに重複した s(BtnText and arrow)が複数回存在します。一意である必要があるclassため、それらをに変更します。idしたがって、htmlは次のようなものになるはずです

<nav class="sidebar1">
    <ul class="navbox">
        <li class="navBtn">
            <div class="slider on"></div>
            <a class="BtnText" class="navButton home" href="index.htm">Home</a>
            <div class="arrow"></div>
        </li>
        <li class="navBtn">
            <div class="slider on"></div>
            <a class="BtnText" class="navButton news" href="news.htm">News</a>
            <div class="arrow"></div>
    </ul>
</nav>

JS

var url = window.location;
$(function() {
    $('nav ul li a.BtnText').each(function(){
        var myHref = $(this).attr('href');
        if(url.match(myHref)) { // use match
            $(this).next('div.arrow')
            .removeClass('arrow').addClass('currenta'); // use removeClass and addClass
        } 
    });
});

デモ。

アップデート：

クラスを削除するarrowと、このクラスに関連付けられているすべてのスタイルが失われるので、 を使用してクラスを削除せずにそのまま使用できることに注意してaddClassください。ですから、その場合はarrowremoveClass

$(this).next('div.arrow').removeClass('arrow').addClass('currenta');

する必要があります

$(this).next('div.arrow').addClass('currenta');
于 2012-08-03T20:10:53.893 に答える