2

私は別の質問からこのスニペットをつかみました:

<script type='text/javascript' >
$(document).ready(function () {
 $("div.content ul li a")
 .mouseover(function () {
  var t = $(this);
  if (!t.hasClass("clicked")) {  // very easy to check if element has a set of styles
   t.addClass('mouseover');
  }
 })
 .mouseout(function () {  // attach event here instead of inside mouse over
  $(this).removeClass('mouseover');
 });

 $("div.content ul li a").click(function () {
  var t = $(this);
  t.toggleClass("clicked");
  if (t.hasClass("clicked")) {
   t.removeClass('mouseover');
  } else {
   t.addClass('mouseover');
  }
 });
});
</script>

私が望んでいた最後のことは、別のタブがクリックされたときにタブの通常の css を復元することです。たとえば、タブの bgcolors は、tab1 をクリックすると白くなり、Tab2 に移動すると黒くなります..Tab1 は白くなり、Tab2 は黒くなります

<ul> 
 <li>
  <a href="#Tab1">Tab 1</a>
 </li>
 <li>
  <a href="#Tab2">Tab 2</a>
 </li>
</ul>

ここにCSS部分があるとしましょう

ul li a {background-color: white;}
ul li a.mouseover {background-color: black;}
ul li a.mouseout {background-olor: white;}
ul li a.clicked {background-color: black;}
4

3 に答える 3

8

実際、このために Javascript を大幅に簡素化できます。これにより、目的の効果が得られるはずです。

<script type="text/javascript">
    $(document).ready(function() {
        $("div.content ul li a")
         .mouseover(function() {
             $(this).addClass('mouseover');
         })
         .mouseout(function() {
             $(this).removeClass('mouseover');
         });

        $("div.content ul li a").click(function(e) {
            e.preventDefault(); //prevent the link from actually navigating somewhere
            $(this).toggleClass("clicked");
            $("div.content ul li a").not(this).removeClass("clicked"); //remove the clicked class from all other elements
        });
    });
</script>

ここでの Javascript は次のことを行います。

  • リンクにカーソルを合わせたときの「マウスオーバー」クラスを追加します
  • リンクをホバーしなくなったときの「マウスオーバー」クラスを削除します
  • リンクをクリックすると、「クリックされた」クラスが切り替えられ、そのクラスを持っていた可能性のある他のリンクから削除されます。これにより、他のタブが「通常の」状態に戻ります。
于 2010-09-19T14:11:49.193 に答える
1

@wsanville

同じタブをダブルクリックする問題はどうですか？

タブをクリックしたときにタブ（選択したものを示す）から下の境界線を削除すると、それで問題ありません。しかし、もう一度クリックすると、そのまま（下の境界線なし）のままになりますが、トグルが原因で、タブを選択していないように見えますが、まだそこにあります。

于 2011-01-21T09:24:28.983 に答える
0

CSS だけを使用して、探しているものを実現することができます。

ul li a {background-color: white;}
ul li a:hover {background-color: black;}
ul li a:focus {background-color: black;}

デモ

于 2010-09-19T14:22:09.570 に答える