Question

我尝试将Tab概念应用到我的网页。如果标签名称是星期一...星期二......星期天。每个标签包含一个基于日期的图像文件（大小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/

为什么我的标签代码不完美？

1 个答案: