<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>选项卡</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<style media="screen">
*{margin: 0px; padding: 0px; text-decoration: none; list-style: none;}
body{max-width: 640px; min-width: 320px; width: 100%; height: 100%; margin: 0px auto;}
.tab-list{width: 100%; height: 240px; border-bottom: 1px solid #aacf53;}
.ul-tab{height: 50px; width: 100%; border-bottom:1px solid #aacf53;}
.ul-tab li{float: left; height: 50px; width: 25%; text-align: center; font-size: 14px;}
.ul-tab li img {width: 20px; margin-top: 10px}
.bkg{background: #aacf53; color: #fff}
.ul-content li{display: none;}
.ul-content li:first-child{display: block}
</style>
<body>
<div class="tab-list">
<ul class='ul-tab'>
<li class='aaa bkg'><img class='img' src="images/show1_hover.png" /><p>选项1</p></li>
<li class='aaa'><img class='img' src="images/show4.png" /><p>选项2</p></li>
<li class='aaa'><img class='img' src="images/show3.png" /><p>选项3</p></li>
<li class='aaa'><img class='img' src="images/show4.png" /><p>选项4</p></li>
</ul>
<ul class = 'ul-content'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
$().ready(function(){
$('.aaa').click(function(){
var index = $(this).index(); //console.log(index);
$('.ul-content li').eq(index).show().siblings().hide()
$(this).addClass('bkg').siblings().removeClass('bkg')
var show1= ['images/show1.png', 'images/show4.png', 'images/show3.png', 'images/show4.png'];
var show_hover= ['images/show1_hover.png', 'images/show4_hover.png', 'images/show3_hover.png', 'images/show4_hover.png'];
for (var i = 0; i < 4; i++) {
if(i==index){
//console.log(show_hover[i]);
$('.img').eq(i).attr('src',show_hover[i]);
}else{
$('.img').eq(i).attr('src',show1[i]);
}
}
})
})
</script>
</html>