zoukankan      html  css  js  c++  java
  • jQuery实例—选项卡(js源码和jQuery)【一些常见方法(1)练习】

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    div{
        display:none;
        50px;
        height:50px;
        border:1px solid red;
        }
    .active{
        display:block;
        }
    .back{
        background:red;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
    <script>
    //javascript源码写
    /*window.onload=function(){
        var aInput=document.getElementsByTagName('input');
        var aDiv=document.getElementsByTagName('div');
        
        for(var i=0;i<aInput.length;i++){
            aInput[i].index=i;
            aInput[i].onclick=function(){
                for(var i=0;i<aInput.length;i++){
                    aInput[i].className='';
                    aDiv[i].style.display='none';
                    }
                this.className='back';
                aDiv[this.index].style.display='block';
                }
            }
        };*/
        
    //jQuery写    
    $(function(){
        $('input').click(function(){
            $('input').attr('class','');
            $('div').css('display','none');
            $(this).attr('class','back');
            $('div').eq($(this).index()).css('display','block');
            
            });
        });
        
    </script>
    <script>
    
    </script>
    </head>
    
    <body>
    <input type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div class="active">111</div>
    <div>222</div>
    <div>333</div>
    
    
    </body>
    </html>

  • 相关阅读:
    Android环境配置问题
    Android diary 1
    Android diary 2
    myeclipse常见问题
    Mysql常用命令
    桉树系统公司市场高级副总裁David Butler:全球最广泛应用的企业内部云平台
    引用外部.css或.js文件的路径问题
    [基础知识]巧用项目生成事件属性自动打包
    TSQL经验总结
    [Silverlight]UI 开发规范
  • 原文地址:https://www.cnblogs.com/moranhuishou/p/5581245.html
Copyright © 2011-2022 走看看