我试图将制表符概念应用于我的网页,例如,制表符名称为星期一...星期二..直到星期天。每个标签都包含一个基于天数的图片文件(尺寸为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-->

最佳答案

试试这个,对我有用。您是否已将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/

关于javascript - 为什么我的标签代码无法正常工作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39610384/

10-13 09:47
查看更多