同じクラスの要素が複数あります。以下でこの方法を使用すると、機能しません。
$(".tab-content")[index].addClass("active-content");
私のコード：
HTML：
<div class="container">
<div class="content">
<ul class="tag">
<li>
<a href="javascript:;">
Lodon
</a>
</li>
<li>
<a href="javascript:;">
Paris
</a>
</li>
<li>
<a href="javascript:;">
Tokyo
</a>
</li>
</ul>
<div class="tab-content">
<h3>Lodon</h3>
<p>London is the capital of England</p>
</div>
<div class="tab-content">
<h3>Paris</h3>
<p>Paris is the capital of France</p>
</div>
<div class="tab-content">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan</p>
</div>
</div>
</div>
そしてJS
$(".tag li").click(function () {
var index = $(this).index();
$(".tab-content")[index].addClass("active-content");
});
これ.addClass()は、がjQueryメソッドであり、ネイティブJSメソッドではないためです。
また、を使用する$(".tab-content")[index]と、jQueryオブジェクト内で真のDOM要素を選択することになります。を使用しdocument.getElementById("id")たときに得られるのと同じ種類の要素。
そして、それをjQueryメソッドと組み合わせる場合と同じように、
document.getElementById("id").addClass("class");
これもエラーを生成し、機能しません。
$(".tab-content")[index].addClass("class");
これを機能させるには、jQueryに固執する必要があります。幸いなことに、jQueryにはそれを行うためのメソッドがあります.eq()。と同じように.addClass()、これはjQueryメソッドなので、同じように使用できます。
解決： $(".tab-content").eq(index).addClass("active-content");
このメソッドは、一致する要素の完全なセットの指定されたインデックスにある要素を選択し、その1つの要素に対してのみアクションを実行します。
少しいじった後、私はあなたのコードのこの代替実装を思いついた。
私はそれをここに置くと思いました、多分誰かがそれが役に立つと思うでしょう：
$(".select").change(function() {
$(".tab.active").removeClass("active").addClass("hidden");
$(".tab").eq($(this).children("option:selected").index()).removeClass("hidden").addClass("active");
});.tab.hidden {display:none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="select">
<option selected="selected">London</option>
<option>Paris</option>
<option>Tokyo</option>
</select>
<div class="tab active"><h3>London</h3><p>London is the capital of England</p></div>
<div class="tab hidden"><h3>Paris</h3><p>Paris is the capital of France</p></div>
<div class="tab hidden"><h3>Tokyo</h3><p>Tokyo is the capital of Japan</p></div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加