選択したメニュー]タブの色を変更します
質問
私は別の質問からこのスニペットをつかみました:
<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はタブ1をクリックすると白く、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;}
解決
実際に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は次のことを行います。
- リンクをホバリングするときに「マウスオーバー」クラスを追加します
- リンクをホバリングしなくなったら、「マウスオーバー」クラスを削除します
- リンクをクリックすると、「クリックされた」クラスを切り替えて、クラスがある可能性のある他のリンクから削除します。これにより、他のタブが「通常」状態に復元されます。
他のヒント
@wsanville
同じタブをダブルクリックする問題はどうですか?
タブをクリックしたときにタブ(選択したものを示す)からボトムボーダーを削除した場合、それは問題ありません。しかし、もう一度クリックすると、そのようにとどまる必要があります(底の境界線はありません)が、トグルのためにタブを選択していないように見えますが、まだそこにいます。
CSSだけを使用して探しているものを達成することが可能です。
ul li a {background-color: white;}
ul li a:hover {background-color: black;}
ul li a:focus {background-color: black;}
所属していません StackOverflow