javascript - 为什么我的标签代码不能正常工作？

Question

我试图将选项卡概念应用于我的网页。例如，选项卡名称是星期一...星期二...直到星期日。每个选项卡都包含一个基于日期的图像文件(大小 460 * 620)。当我运行我的页面时它显示所有图像，我需要的是根据选项卡图像将显示。但这里显示所有图像。

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。

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/