クラシックホバー、アクティブなどを取得する方法。 javascriptの動作

Question

私はこの問題を抱えています。今私はいつも同じソリューションを使用しますが、それは正しい方法ではないと思います。ここで

はケースです：

6つのリンクと6つのタブでページを持っている場合。各リンクは、javascriptのタブを表示または非表示にします（display：block/none）。私は、通常のhtml/cssの方法は動作しないという問題にぶつかります。私は、リンクのホバーを作るために私のCSSを設定することができますが、アクティブなどのようなものは動作しません。今私は6つの別々の関数を使用して各リンクのスタイルを操作するので、リンク5をクリックするとリンク5に下線が引かれ、残りの部分はリンクされません。

私は既に.thisとobj.を使用して自分のコードをリファクタリングしようとしましたが、これでも私が望む動作が得られません。 jssでCSSを変更すると、CSSはもう動作しないようです。

これは正常なhtmlリンク動作を実現する正しい方法だとは思いませんか？

誰にでもアイデアはありますか？この問題をどうやって修正しますか？これは、すべてのコンテンツが自動的に生成される私の新しいプロジェクトでは本当の問題になります。

Answer 1

jQueryを使用する場合は、ホバー機能を使用してホバー状態エフェクトを簡単に作成できます。

if ($("#tab").hasClass('active') { 
    $(".class-of-item-to-show").show(); 
} 

$("#tab1").hover(
    function() { 
    $(".class-of-item-to-show").show(); 
    }, 
    function() { 
    $(".class-of-item-to-show").hide(); 
    } 
); 

あなたが質問で表示するようにタブとデータを投稿する場合、私はあなたがループとしてそれを設定することができます。..

Answer 2

CSSがuの変更後はもう動作しないようですjsとのCSS。

これは、要素の.style.*プロパティを変更するためにJSを使用していることを示唆しています。

これらは、「most specific」と常に見なされるstyle属性にマップされます。

解決策は、スタイル属性だけを残すことです。要素のスタイルを変更したい場合は、にCSSをあらかじめ書き込んでおいてください。次に、JavaScriptを使用して要素のclassNameを変更します。

これにより、適用されるスタイルをより適切に制御できます。

（これは、懸念の分離に関する一般的な規則に従います。開発者は、CSSとHTMLを分離し、JSをHTMLとは別にする方が良くなっていますが、CSS JSとは別に）

Answer 3

私はあなたが望む機能をjQueryで実現できると思います。

私はちょうどあなたが考えを持つことができるようにサンプルコードを入れます。次のリンクのセット。

<a href ="#" class ="test not" >a</a> 
<a href ="#" class ="test not" >b</a> 
<a href ="#" class ="test not" >c</a> 

、その後のjQueryを使用して

は、私は削除し、個別に選択してリンクを識別することができます上記のコードのようにホバリングイベント

<script type ="text/javascript"> 
    $(document).ready(function() { 
     $('.test').live('hover', function() { 

      $(this).removeClass('not'); 
      $(this).addClass('selected');      

     }); 
    }); 
</script> 

にクラスを追加する方法を示しますあなたは例えばどんなイベントにコードを書くことができます生きます。あなたは、これは