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

实现方式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>

    
</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（）方法，这里不再记录。

相关阅读:
用户控件
垃圾弟弟
如何解决“呈现控件时出错”的问题
IE与FireFox差距
NavigateUrl属性绑定
table
firefox不支持attachEvent，attach
转　jQuery分类　
GridView列数字、货币和日期的显示格式
appendChild

原文地址：https://www.cnblogs.com/fhychzu/p/5704065.html