5

境界線の色を使用して、ナビゲーションボタンに単純な3D効果を作成しようとしています。私のボタンは、背景色、境界線の色、テキストのパディング、そしてもちろんリンクを含む順序付けられていないリストで構成されているため、リンクは次のような一般的な方法でネストされます。

<ul>
<li><a class="active"   href="link1.html">link1</a></li>
<li><a class="inactive" href="link2.html">link2</a></li>
<li><a class="inactive" href="link3.html">link3</a></li>
..etc
</ul>

jqueryを使用して、クリック時にアンカークラスを変更して外観を変更しています。

私がやりたいのは、css（または私が推測するjquery）を使用して、「アクティブ」リンクに続くアンカーを具体的にターゲットにすることですが、それが可能かどうかはわかりません。

「h3+p {」タイプのセレクターの使用をテストし、それがどのように機能するかを理解しましたが、リンクをターゲットにしようとするとすぐに機能しなくなるようです。

私はもう試した：

a.active + a {background-color:red}

と...

a.active:link + a:link {background-color:red}

および他の特異性の変種...

li a.active:link + a:link {background-color:red}

ul li a.active:link + a:link {background-color:red}

ul li a.active:link + a.inactive:link {background-color:red}

...等。

これは明らかに機能します：

p.active + p {background-color:red}

...では、なぜこれを行わないのですか？

a.active + a {background-color:red}

つまり、基本的に、兄弟コンビネータをリンクで動作させることができない理由と、解決策または回避策があるかどうかを理解しようとしています。

4

4 に答える 4

3

Adjacent sibling combinatorアンカーリンクは兄弟ではないため、セレクターは要素を選択しないため、を使用しています。

E + F：E要素の直前のF要素

jQueryを使用しているので、次の方法で要素を選択できます。

$('a.active').parent().next().children('a').addClass('red')

http://www.w3.org/TR/selectors/#adjacent-sibling-combinators

于 2012-10-27T23:39:06.943 に答える
2

私がやりたいのは、css（または私が推測するjquery）を使用して、「アクティブ」リンクに続くアンカーを具体的にターゲットにすることですが、それが可能かどうかはわかりません。

すでに述べたように、ターゲットセレクターを使用するcssアプローチがある可能性がありますが、アンカーの状態を監視するjQueryソリューションを使用します。以下のアプローチを機能させるには、アンカーに正確にIDを追加する必要があります。あなたのhrefハッシュのように：

<a href="#myanchor" id="myanchor">My anchor</a>

次に、次のように、参照されるイベントに関数をバインドすることにより、 $（window）オブジェクトからhashchangeイベントを簡単に監視できます。

$(window).bind('hashchange', function(e) {

            var page = window.location.hash; // page = #myanchor
            $(page).doMyCssStuff(); //
        });

これは、たとえばナビゲーションスタイルを追加するための優れた方法です。ユーザーがストーリーに「戻る」を押した場合、上記のスクリプトは、意図したとおりのアンカーにcssを実行するだけです。

お役に立てば幸いです。乾杯

于 2012-10-27T23:44:39.923 に答える
2

jQUeryでは、次のリンクをターゲットにして、クラスを簡単に追加できます

クリックハンドラーが次のようになっていると仮定します。

$('#linkList a').click(function(){
    $('a.active').toggleClass('active').toggleClass('inactive')
    $('a.redClass').removeClass('redClass')
    $(this).toggleClass('active').toggleClass('inactive').parent().next().find('a').addClass('redClass')
})
于 2012-10-27T23:46:38.167 に答える
2

undefinedの答えをサポートします。cssのみを使用する場合は、要素の代わりにliのクラスを切り替えることができます。そうすれば、それは十分に簡単です：li.active + li a {background-color：red}

文字通り、それは次のことを意味します：「アクティブな」クラスを持つ要素の隣のli内の要素をターゲットにします。

于 2012-10-28T00:43:05.020 に答える