私は現在、非常に厄介な問題の良い解決策を見つけるのに苦労しています。Javascript - コンテンツ内のリストを含むタブ
私は現在自分のウェブサイトでタブを使用していますが、これらのタブはチュートリアルで見つけることができるほとんどのタブシステムと同様にUL、LIシステムを利用しています。
主な問題は、javascriptのために私のコンテンツの中にUL、LIシステムを使用できないということです。
JavaScriptはアクティブなクラスを選択したタブに追加し、別のタブに切り替えるとすぐに削除します。これにより、すべてのLIは「display:none;」を継承します。関数。
これを修正するにはどうすればよいでしょうか?ここで
が、私はコード( https://jsfiddle.net/f6jLt91d/)をJSFiddleを追加しましたjavascriptの一部
$(function() {
var container = $('.tabs-container'),
tabs = container.find('.tabs li'),
links = tabs.find('a'),
contents = container.find('.contents li');
links.click(function (e) {
e.preventDefault();
});
tabs.on('click', function() {
var $this = $(this),
$id = $this.find('a').attr('href'),
$target = container.find('.contents ' + $id);
if ($this.hasClass('active'))
return;
tabs.removeClass('active');
$this.addClass('active');
contents.removeClass('active').hide();
$target.fadeIn(500).addClass('active');
});
});
ある
あなたが見ることができるように、最初のタブには、「表示され、そこでのリストを持っていますスタイルを手動で「表示:インライン」ルールを追加してしまえば、タブ2に切り替えてからタブ1に戻るとすぐに消えます。
私はおそらく、ここで本当に小さくて愚かなものを見落としていますが、私は過去3日間この問題に悩まされていて、この問題を解決する解決策を見つけられないようです。
私は少し ">" の部分についてのすべてを忘れするために恥ずかしい感じています。 ありがとう、これはすべてスムーズに動作しました。 できれば私はupvoteします。 :) – user2949138