• jquery-制作选项卡


    强大的jquery-制作选项卡

     

    最近在学习jquery,特地把今天写的一个选项卡源码贴出来。只是做只是梳理,大神们请不要吐槽,如果有更好的方法,欢迎指点。谢谢。

    css

    <style>
    #tab div{ 200px; height:200px; border:#33F 1px solid; display:none}
    .active{ background:red}    
    </style> 

    引入jquery

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    1、原生的js

    复制代码
     1 window.onload=function(){
     2         var oDiv=document.getElementById('tab');
     3         var oInput=oDiv.getElementsByTagName('input');
     4         var Childdiv=oDiv.getElementsByTagName('div');
     5         //debugger;
     6         for(var i=0;i<oInput.length;i++)
     7         {    
     8             oInput[i].index=i;
     9             oInput[i].onclick =function(){
    10                 for(var i=0;i<oInput.length;i++){
    11                     oInput[i].className='';
    12                     Childdiv[i].style.display='none';
    13                     }
    14                 this.className='active';
    15                 Childdiv[this.index].style.display='block';
    16                 };
    17         }
    18     }
    复制代码

    2、jquery

    复制代码
    1 $(function(){
    2             $('#tab').find('input').click(function(){
    3                     $('#tab').find('input').attr('class','');
    4                     $('#tab').find('div').css('display','none');
    5                     $(this).attr('class','active');
    6                     $('#tab').find('div').eq($(this).index()).css('display','block');
    7                 });
    8         });
    复制代码

    3、链式jquery

    复制代码
    1 $(function(){
    2                 $('#tab').find('input').click(function(){
    3                         $(this).attr('class','active').siblings().attr('class','').parent().find('div').eq($(this).index()).css('display','block').siblings().css('display','');
    4                     });
    5             });
    复制代码

    html主体:

    复制代码
    <div id='tab'>
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">第一个tab</div>
    <div>第二个tab</div>
    <div>第三个tab</div>
    </div>
    复制代码
     
     
    标签: cssjsjquery
  • 相关阅读:
    黑盒测试分类
    Java变量的初始化顺序
    javahttp请求四种方式
    mybatis sql查询慢
    jacoco搭配springMVC maven tomcat项目,单元测试&接口测试踩坑
    maven标签pluginManagement和plugins区别
    Java反射学习之Field类访问和修饰变量
    Classpath重新认识
    properties文件加载的六种方法
    VMware ESXI6.0安装和配置IP地址
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4055567.html
Copyright © 2020-2023  润新知