2017-01-05 15 views
1

私は現在、非常に厄介な問題の良い解決策を見つけるのに苦労しています。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日間この問題に悩まされていて、この問題を解決する解決策を見つけられないようです。

答えて

1

内容は<li>ですので、CSSセレクターに固有の必要があります。これは本当にLoLです。それを使用しないでください。しかし、私が見た最良のコードの1つです。

修正は本当に簡単です。最上位レベル<li>だけを隠し、ツリーを走らせないでください。ここで子セレクタを使用するセレクタを変更しています。最初に、それは問題を引き起こした子孫を選択します。

tabs  = container.find('.tabs > li'), 
contents = container.find('.contents > li'); 

スニペット

$(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'); 
 
    }); 
 
});
.tabs-container { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width: 400px; 
 
    float: none; 
 
    list-style: none; 
 
    position: relative; 
 
    margin: 0px 0 0 10px; 
 
    text-align: left; 
 
} 
 

 
.tabs-container .tabs, 
 
.tabs-container .contents { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.tabs-container .tabs li { 
 
    float: left; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    border-radius: 2px 2px 0 0; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
    background: #222; 
 
    cursor: pointer; 
 
    position: relative; 
 
    top: 4px; 
 
    border-left: 1px solid #000; 
 
    border-top: 1px solid #000; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 

 
.tabs-container .tabs li:last-child { margin-right: 0; } 
 

 
.tabs-container .tabs li:hover { 
 
    background: #111; 
 
} 
 

 
.tabs-container .tabs li.active { 
 
    top: 0; 
 
    padding-top: 17px; 
 
    background: #000; 
 
} 
 

 
.tabs-container .tabs li a { 
 
    text-decoration: none; 
 
    color: #666; 
 

 
} 
 

 
.tabs-container .tabs li.active a, 
 
.tabs-container .tabs li:hover a { 
 
    color: #888; 
 
} 
 

 
/* Tab Contents */ 
 

 
.tabs-container .contents { 
 
    width: 100%; 
 
    font-size: 12px; 
 
    line-height: 18px; 
 
    padding: 20px; 
 
    top: 53px; 
 
    left: 0; 
 
    background: #222; 
 
    border: 1px solid #000; 
 
    border-radius:5px; 
 
} 
 

 
.tabs-container .contents li { 
 
    display: none; 
 
} 
 

 
.tabs-container .contents li.active { 
 
    display: block; 
 
    color:#FFF; 
 
} 
 

 
.cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
.cf { 
 
    *zoom: 1; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabs-container"> 
 
    <ul class="tabs cf"> 
 
    <li class="active"><a href="#one">Tab 1</a></li> 
 
    <li><a href="#two">Tab 2</a></li> 
 
    <li><a href="#three">Tab 3</a></li> 
 
    <li><a href="#four">Tab 4</a></li> 
 
    </ul> 
 

 
    <ul class="contents cf"> 
 
    <li id="one" class="active"> 
 
     <ul> 
 
     <li style="display:inline;">Testing</li> 
 
     <li style="display:inline;">Testing</li> 
 
     <li style="display:inline;">Testing</li> 
 
     <li style="display:inline;">Testing</li> 
 
     <li style="display:inline;">Testing</li> 
 
     </ul> 
 
    </li> 
 
    <li id="two"> 
 
     Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
 
    </li> 
 
    <li id="three"> 
 
     Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
 
    </li> 
 
    <li id="four"> 
 
     Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
 
    </li> 
 
    </ul> 
 
</div>

フィドル:https://jsfiddle.net/engcr3qp/

+0

私は少し ">" の部分についてのすべてを忘れするために恥ずかしい感じています。 ありがとう、これはすべてスムーズに動作しました。 できれば私はupvoteします。 :) – user2949138

関連する問題