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