zoukankan      html  css  js  c++  java
  • 选项卡切换

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>选项卡切换</title>
    <style>
    .sec{border:1px solid #000;100px;height:100px;display:none}
    .news{display:block}
    input{background:#fff}
    .active{background:yellow}
    </style>
    <script src="jquery-1.9.1.js"></script>
    <script>
    $(function(){
    $("#main").find("input:button").click(function(){//在大的div里找出所有的按钮,添加点击事件
    var i=$(this).index(); //设置当前被点击按钮的序号为i
    $(this).addClass("active").siblings(":button").removeClass("active");//被点击的按钮添加class为active的样式,其它按钮删除样式
    $(".sec").eq(i).css("display","block").siblings(".sec").css("display","none");//同时每个按钮所对应的div得display为block,其它div的display为none。
    });
    });
    </script>
    </head>
    <body>
    <div id="main">
    <input type="button" value="1" class="active">
    <input type="button" value="2">
    <input type="button" value="3">
    <div class="sec news">新闻</div>
    <div class="sec pic">图片</div>
    <div class="sec topic">专题</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    鼠标滑过,解决ul下 li下a的背景与父级Li不同宽的问题
    php函数
    常用函数之数组函数
    php流程控制
    php运算符
    php常量
    php变量的数据类型
    PHP是什么
    css3新增属性
    html5的常用标签
  • 原文地址:https://www.cnblogs.com/annie211/p/5999873.html
Copyright © 2011-2022 走看看