CSSタブ - 最初の読み込み時に子コンテンツを非表示にする

Question

私はタブシステムを持っていますが、これは私のCMSでうまく動作するようです。しかし、最初に読み込まれたときに子供のコンテンツ領域を隠すのが難しいです。タブをクリックすると、コンテンツが非表示になります。私は何が欠けていますか？当社のCMSへ

(function($) { 
 

 
    var tabs = $(".tabs li a"); 
 

 
    tabs.click(function() { 
 
    var content = this.hash.replace('/', ''); 
 
    tabs.removeClass("active"); 
 
    $(this).addClass("active"); 
 
    $("#content").find('p').hide(); 
 
    $(content).fadeIn(200); 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <ul class="tabs group"> 
 
    <li> 
 
     <a class="active" href="#/one">Tab 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#/two" id="tabs2">Tab 2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#/three" id="tabs3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="content"> 
 
    <p id="one" style="clear: both;"><strong>Product Summary 1</strong><br> 
 
     <br> 
 
     <strong>Lorem ipsum 1</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, 
 
     mi.<br> 
 
     <br></p> 
 
    <p id="two"><strong>Product Summary 2</strong><br> 
 
     <br> 
 
     <strong>Lorem ipsum 2</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, 
 
     mi.<br> 
 
     <br></p> 
 
    <p id="three"><strong>Product Summary 3</strong><br> 
 
     <br> 
 
     <strong>Lorem ipsum 3</strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, 
 
     mi.<br> 
 
     <br></p> 
 
    </div> 
 
</div>

私はTinyMCEをWYSIWYGは、コードの大部分を取り除くだろうと私は書くことができ、コードにはほとんど動きがあります。上のHTMLはほとんど表示されているので、CMSの別のセクションにJQueryとCSSを追加できます。

fiddleには、すべてのHTML、JQuery、およびCSSの使用例が表示されます。

私はそれが何かばかげていると知っています。誰かが助けてくれると頭の中で私はおそらく殴られますが、私は助けをあげるでしょう。

感謝

Answer 1

は、あなたのスタイルシートの一番下に

#two, #three{ 
    display:none; 
} 

を追加します。 https://jsfiddle.net/shv3rxn7/7/

Answer 2

ここでは、ソリューションhttps://jsfiddle.net/1u8m8pko/

$('#content p').hide(); 
 

 
$('.tabs li a').click(function(){ 
 
    $('#' + $(this).data('id')).slideDown().siblings('p').slideUp(); 
 
}); 
 

 
$('.tabs li a').first().trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
<ul class="tabs group"> 
 
    <li> 
 
     <a href="#/one" data-id="one">Tab 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#/two" data-id="two" id="tabs2">Tab 2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#/three" data-id="three" id="tabs3">Tab 3</a> 
 
    </li> 
 
</ul> 
 
<div id="content"> 
 
    <p id="one" style="clear: both;"><strong>Product Summary 1</strong><br> 
 
    <br> 
 
    <strong>Lorem ipsum 1</strong><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, 
 
    nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur 
 
    adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi.<br> 
 
    <br></p> 
 
    <p id="two"><strong>Product Summary 2</strong><br> 
 
    <br> 
 
    <strong>Lorem ipsum 2</strong><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, 
 
    nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur 
 
    adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi.<br> 
 
    <br></p> 
 
    <p id="three"><strong>Product Summary 3</strong><br> 
 
    <br> 
 
    <strong>Lorem ipsum 3</strong><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus, 
 
    nunc nec efficitur facilisis, mi. Lorem ipsum dolor sit amet, consectetur 
 
    adipiscing elit. Pellentesque tempus, nunc nec efficitur facilisis, mi.<br> 
 
    <br></p> 
 
</div>

で行く私は、タグ（タブ）固定するdata-idすなわちデータ属性を追加しました。

data-idを取得するためのjQueryクリックイベントが追加されました。 jQueryの使用私は最初のタブのクリックをトリガーしました。

希望すると、これが役立ちます。