实现方式1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src = 'jquery-1.9.1.js'></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#subBannerFirst').click(function(){
$('#subConFirst').css('display','block');
$('#subConSecond').css('display','none');
$('#subConThird').css('display','none');
});
});
$(document).ready(function(){
$('#subBannerSecond').click(function(){
$('#subConFirst').css('display','none');
$('#subConSecond').css('display','block');
$('#subConThird').css('display','none');
});
});
$(document).ready(function(){
$('#subBannerThird').click(function(){
$('#subConFirst').css('display','none');
$('#subConSecond').css('display','none');
$('#subConThird').css('display','block');
});
});
</script>
<!--script src = 'libs/SuperMap_Cloud.js'></script-->
</head>
<body>
<div id='myBannerList' style ='100%;height:20px;'>
<div id='subBannerFirst' href='#subConFirst' style=' 50px;height: 20px;float:left;background-color:#1e3a4f;'>第一项</div>
<div id='subBannerSecond' href='#subConSecond' style=' 50px;height: 20px;float:left;background-color:red;'>第二项</div>
<div id='subBannerThird' href='#subConThird' style=' 50px;height: 20px;float:left;background-color:blue;'>第三项</div>
</div>
<div id='banContent' style ='100%;height:150px;float:left;'>
<div id='subConFirst' style ='100%;height:150px;display:block;background-color:#1e3a4f;float:left;'></div>
<div id='subConSecond' style ='100%;height:150px;display:none;background-color:red;float:left;'></div>
<div id='subConThird' style ='100%;height:150px;display:none;background-color:blue;float:left;'></div>
</div>
</body>
</html>
实现方式2：
js代码：
//选择隐藏或者显示Banner下的DIV块方法
function changeConFirst() {
$('#subConFirst').css('display', 'block');
$('#subConSecond').css('display', 'none');
$('#subConThird').css('display', 'none');
}
function changeConSecond() {
$('#subConFirst').css('display', 'none');
$('#subConSecond').css('display', 'block');
$('#subConThird').css('display', 'none');
}
function changeConThird(){
$('#subConFirst').css('display','none');
$('#subConSecond').css('display','none');
$('#subConThird').css('display','block');
}
html代码
<div id='myBannerList' style ='100%;height:20px;'>
<div id='subBannerFirst' href='#subConFirst' onclick='changeConFirst()' style=' 50px;height: 20px;float:left;cursor:pointer'>第一项</div>
<div id='subBannerSecond' href='#subConSecond' onclick='changeConSecond()' style=' 50px;height: 20px;float:left;cursor:pointer'>第二项</div>
<div id='subBannerThird' href='#subConThird' onclick='changeConThird()' style=' 50px;height: 20px;float:left;cursor:pointer'>第三项</div>
</div>
<div id='banContent' style ='100%;height:150px;float:left;'>
<div id='subConFirst' style ='100%;height:150px;display:block;float:left;'></div>
<div id='subConSecond' style ='100%;height:150px;display:none;float:left;'></div>
<div id='subConThird' style ='100%;height:150px;display:none;float:left;'></div>
</div>
实现方式1和2其实没区别，function的定义方式不一样而已。方式一是纯jquery，第二种是定义js的函数声明。
还有第三种实现方式：利用jquery的 show（），hiden（）方法，这里不再记录。