I am attempting to implement a tab concept on my website. For example, the tab names are Monday...Tue.. up to Sunday. Each tab contains an image file based on the days (size 460*620). When I run my page, it shows all images, but what I need is for the image to be displayed according to the selected tab.
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-->