タブの切り替え JS 初回アクセス時に隠している方の要素が出てしまう。

Question

タブの切り替えを実装したく考えてます。
初回アクセス時に隠してある方(#two)のページ要素が表出されてしまいます。
タブを切り替え→デフォルトのタブ(#one)にもう１度切り替えると消えています。

HTML＞
<ul class="tabs group">
     <li><a class="active" href="#/one">One</a></li>
     <li><a href="#/two">Two</a></li>
   </ul>

   <div id="content">

     <section id= "one">
      <div class ="mypage-head">
         <img src ="***********.jpg"></img>
      </div>
     </section>


     <section id= "two">
       <div class ="mysene-wrapper">
        <img src ="************.jpg"></img>
      </div>
     </section>

CSS>

ul.tabs {
	width: 390px;
	height: 80px;
	margin: 30px 20px 0 20px;
	list-style: none;
	overflow: hidden;
  padding: 0;
}
ul.tabs li {
	float: left;
	width: 130px;


}
ul.tabs li a {
	position: relative;
	display: block;
	height: 30px;
	margin-top: 40px;
	padding: 10px 0 0 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: #6edeef;
	-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
	z-index: 3;
  -webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
	z-index: 2;
}
.tabs li:last-child a {
	z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs li a:hover {
	margin: 35px 0 0 0;
	padding: 10px 0 5px 0;
}
ul.tabs li a.active {
	margin: 30px 0 0 0;
	padding: 10px 0 10px 0;
	background: rgb(245, 245, 245);
	color: rgb(110, 222, 239);
	/*color: #ff6831;*/
	z-index: 4;
	outline: none;
}
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.group:after {
    clear: both;
}


Java Script>
(function($) {

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

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

})(jQuery);

ちなみにこちらをコピペ＆編集してます。
https://codepen.io/CoffeeCupDrummer/pen/qmIdx/

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

コードほとんど見てないですが、初期で表示しないブロックをインラインスタイルでdisplay:none;入れておけばよいかと。

Answer 2

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

参照しているところですが、背景色と同じ白にすることで文字が見えないだけで全選択などすれば見えます。もともとそういう作りになっているのかと

Comments

[lucky_luci]

ありがとうございます！解消しました。