zoukankan html css js c++ java

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

查看全文

相关阅读:
SSM,即Spring+SpringMVC+MyBatis三个开源框架的整合框架集。
doAfterBody()方法是在（）接口中定义的。
考虑下面两个JSP文件代码片断： test1.jsp:
下列JSP代码：
以下web.xml片断（）正确地声明servlet 上下文参数。
以下（）可用于检索session属性userid的值。
有关Servlet的生命周期说法正确的有（）。
关于Web应用程序，下列说法错误的是（）。
如何创建Cookie? (选择1项)
HttpServlet中，用来处理POST请求的方法是(选择1项)

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