• HTML系列:css3选项卡



    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab选项卡</title>
    <style>
    * {
    margin:0 auto;
    padding:0 auto;
    }
    .tabBox {
    margin: 20px auto;
    500px;
    }
    .tabBox ul {
    position:relative;
    top:1px;
    right:40px;
    /* 相对于之前的位置向下移动1px,使边框重合 */
    }
    .tabBox ul li {
    display: inline-block;
    /* 同一行,块标签 */
    margin-right:10px;
    padding:0 10px;
    line-height: 33px;
    border:1px solid #AAA;
    cursor: pointer;
    }
    .tabBox ul li.active {
    color:lightcoral;
    font-weight:bold;
    border-bottom-color:#fff;
    /* 当前li的边框覆盖率div的边框,我们让li的下边框为背景颜色白色,这样看上去就像没边框 */
    }
    .tabBox div {
    display: none;
    line-height: 148px;
    text-align: center;
    border:1px solid #AAA;
    }
    .tabBox div.active {
    display: block;
    /* div .active加空格是后代筛选,先搜索div在div中筛选,div .active不加空格当前div标签的二次筛选,同级筛选 */
    }
    </style>
    </head>
    <body>
    <!-- div.tabBox#tabBox>(ul>li*3)+(div*3) [Tab]在括号前按下Tab键多行添加标签 -->
    <!-- 整体大盒子 -->
    <div class="tabBox" id="tabBox">
    <!-- 上面三个tab签 -->
    <ul>
    <li class="active">新闻</li>
    <li>音乐</li>
    <li>电影</li>
    </ul>
    <!-- tab对应切换的内容 -->
    <div class="active">金三胖访华</div>
    <div>需要你陪</div>
    <div>复仇者联盟</div>
    </div>
    <script>
    // 思路:1.给所以的ul绑定点击事件,当点击任何一个li的时候,都做第二步操作
    // 2.可以先让所以的li && div的class都为空(xxx.className=''), 再让当前点击的这个li和对应的div有className这个样式类即可
    //获取id为tabBox的所有li和div
    var tabBox = document.getElementById('tabBox');
    var tabList = tabBox.getElementsByTagName('li');
    var divList = tabBox.getElementsByTagName('div');
    //重复操作用循环
    //=>自定义属性方式
    for (var i = 0; i < tabList.length; i++) {
    //=>每一轮循环的时候,给每一个li设置一个自定义属性‘zzzz’,存储的值是各自的索引
    // TAB-List
    // {
    // 0:{zzzIndex:0,...},
    // 1:{zzzIndex:1,...},
    // 2:{zzzIndex:2,...},
    // length:3
    // }
    tabList[i]['zfIndex'] = i ;
    console.dir(tabList)
    tabList[i].onclick = function() {
    //this:代表的是当前点击的这个li
    changeTab(this.zfIndex); //=>需要索引
    }
    }
    //*不行的代码
    // for (var i = 0; i < tabList.length; i++) {
    // // tabList[i] 每一轮循环当前要操作的li对象,i是变量索引
    // tabList[i].onclick = function() {
    // //=>给当前元素某一个事件绑定一个方法,绑定的时候方法没有执行(属于创建)当在页面中手动触发点击事件的时候绑定的方法就会执行
    // // i=0 tabList[0].onclick=function..
    // // i=1 tabList[1].onclick=function...
    // // i=2 tabList[2].onclick=function...
    // alert(i);
    // changeTab(i);//=>需要把当前点击的这个li的索引传递进来
    // //分析:第一次循环
    // // i=0 tabList[0].onclick = function (){
    // // "changeTab(i);"
    // // };
    // // i++ 第二次循环
    // // i=1 i=0 tabList[1].onclick = function (){
    // // "changeTab(i);"
    // // };
    // // i++ 第三次循环
    // // i=2 i=0 tabList[2].onclick = function (){
    // // "changeTab(i);"
    // // };
    // // i++
    // // i=3 循环结束
    // }
     
    // }


    //=>第二中不用循环的方法
    // tabList[0].onclick = function (){
    // changeTab(0);
    // }
    // tabList[1].onclick = function (){
    // changeTab(1);
    // }
    // tabList[2].onclick = function (){
    // changeTab(2);
    // }
    //=>封装一个方法完成页卡切换
    function changeTab(n){
    //=>n:形参变量,当执行这个方法的时候,会把当前点击的这个li的索引传递过来

    //=>1.清空所有选中样式
    for (var i = 0 ; i < tabList.length; i++){
    tabList[i].className = '';
    divList[i].className = '';
    }
    //=>2.当前点击的有选中样式
    tabList[n].className='active';
    divList[n].className='active';
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    【MyLocations】标记位置App开发体会
    iOS开发-Core Location和Map Kit
    iOS开发-轻点、触摸和手势
    iOS开发-GCD和后台处理
    iOS开发-block使用与多线程
    iOS开发-数据持久化
    iOS开发-为程序添加应用设置
    对iOS中MVC的理解
    docker
    linux shell
  • 原文地址:https://www.cnblogs.com/fron-tend/p/11984484.html
Copyright © 2020-2023  润新知