なぜ私のタブコードが完璧に機能していないのですか？

Question

私のウェブページにタブコンセプトを適用しようとしています。タブ名は月曜日です。火曜日..日曜日までです。各タブには、日（サイズ460 * 620）に基づいて1つの画像ファイルが含まれています。私は自分のページを実行すると、すべての画像を表示します。ここにすべての画像が表示されます。

HTML：

<!--tab code--> 
      <div class="tabs" style="margin-top:100px;"> 
       <ul> 
        <li><a href="#item1">Item 1</a></li> 
        <li class="active"><a href="#item2">Item 2</a></li> 
        <li><a href="#item3">Item 3</a></li> 
       </ul> 
       <div class="tabInner"> 
        <div id="item1"> <img src="order/Order/image/daily_buffet/40820-sunday.png"/></div> 
        <div id="item2"> <img src="order/Order/image/daily_buffet/50557-tuesday.png"/></div> 
        <div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div> 
       </div> 
       </div> 
      <!--end of tab code--> 

CSS：

<!--tab code--> 

    .tabs ul { 
     list-style: none; 
    } 
    .tabs ul li { 
     float: left; 
     background: #eee; 
     border: 1px #aaa solid; 
     border-bottom: none; 
     margin-right: 10px; 
     padding: 5px; 
    } 
    .tabs ul li.active { 
     margin-bottom: -1px; 
     padding-bottom: 6px; 
    } 
    .tabInner { 
     clear: both; 
     border: 1px solid #aaa; 
     height: 200px; 
     overflow: hidden; 
     background: #eee; 
    } 
    .tabInner div { 
     height: 200px; 
     padding: 10px; 
    } 
<!--end of tab code--> 

Answer 1

その私のために働いて、これを試してみてください。プロジェクトにJqueryを含めましたか？それを一度確認するか、ホストされたURLを更新してください。あなたのコードはjsfiddleに取り組んでいます

HTML

<!--tab code--> 
      <div class="tabs" style="margin-top:100px;"> 
       <ul> 
        <li><a href="#item1">Item 1</a></li> 
        <li class="active"><a href="#item2">Item 2</a></li> 
        <li><a href="#item3">Item 3</a></li> 
       </ul> 
       <div class="tabInner"> 
        <div id="item1"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/></div> 
        <div id="item2"> <img src="http://sites_jupiterbase2.jumbowp.com/wp-content/uploads/2014/08/thumbnail-placeholder-Copy.jpg"/></div> 
        <div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div> 
       </div> 
       </div> 
      <!--end of tab code--> 

https://jsfiddle.net/hpx0ymcL/1/