您的位置：首页 > Web前端 > JQuery

Banner中利用Jquery隐藏显示下方DIV块

2016-07-25 16:39 465 查看
实现方式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 ='width:100%;height:20px;'>
<div id='subBannerFirst' href='#subConFirst' style='width: 50px;height: 20px;float:left;background-color:#1e3a4f;'>第一项</div>
<div id='subBannerSecond' href='#subConSecond' style='width: 50px;height: 20px;float:left;background-color:red;'>第二项</div>
<div id='subBannerThird' href='#subConThird' style='width: 50px;height: 20px;float:left;background-color:blue;'>第三项</div>
</div>
<div id='banContent' style ='width:100%;height:150px;float:left;'>
<div id='subConFirst' style ='width:100%;height:150px;display:block;background-color:#1e3a4f;float:left;'></div>
<div id='subConSecond' style ='width:100%;height:150px;display:none;background-color:red;float:left;'></div>
<div id='subConThird' style ='width: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 ='width:100%;height:20px;'>
<div id='subBannerFirst' href='#subConFirst' onclick='changeConFirst()'  style='width: 50px;height: 20px;float:left;cursor:pointer'>第一项</div>
<div id='subBannerSecond' href='#subConSecond' onclick='changeConSecond()' style='width: 50px;height: 20px;float:left;cursor:pointer'>第二项</div>
<div id='subBannerThird' href='#subConThird' onclick='changeConThird()' style='width: 50px;height: 20px;float:left;cursor:pointer'>第三项</div>
</div>
<div id='banContent'  style ='width:100%;height:150px;float:left;'>
<div id='subConFirst' style ='width:100%;height:150px;display:block;float:left;'></div>
<div id='subConSecond' style ='width:100%;height:150px;display:none;float:left;'></div>
<div id='subConThird' style ='width:100%;height:150px;display:none;float:left;'></div>
</div>

实现方式1和2其实没区别，function的定义方式不一样而已。方式一是纯jquery，第二种是定义js的函数声明。

还有第三种实现方式：利用jquery的 show（），hiden（）方法，这里不再记录。


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航