• js和jquery实现tab选项卡


    • <!doctype html>
      <html lang="en">
       <head>
        <meta charset="UTF-8">
      
        <meta name="Generator" content="EditPlus®">
        <meta name="Author" content="Create by double 2015-07-09">
       
        <title>jquery实现tab</title>
        <script src="jquery-1.7.2.js"></script>
        <style>
              *{
                      padding:0;
                      margin:0;
              }
              ul{
                      list-style-type:none;
              }
              #ul{
                      height:30px;
                      margin-bottom:10px;
              }
              body{
                      margin:50px;
              }
              #ul li{
                      height:30pxx;
                      line-height:30px;
                      padding:0 15px;
                      border:1px solid #abcdef;
                      float:left;
                      margin-right:3px;
                      cursor:pointer;
              }
              #ul li.current{
                      background:#abcdef;
              }
              #content div{
                      width:300px;
                      height:200px;
                      border:1px solid #abcdef;
                      display:none;
              
              }
              #content div.show{
                      display:block;
              }
        </style>
       </head>
       <body>
              <ul id="ul">
                      <li class="current">php</li>
                      <li>java</li>
                      <li>js</li>
              </ul>
              <div id="content">
                  <div class="show">php...介绍</div>
                  <div>java...介绍</div>
                  <div >js...介绍</div>
              </div>
          <script>
                  //未使用事件委托
                      var ul = document.getElementById('ul');
                      var li = ul.getElementsByTagName('li');
                      var content = document.getElementById('content');
                      var div = content.getElementsByTagName('div');
                      for(var i=0;i<li.length;i++){
                          li[i].index = i;
                              li[i].onclick=function(){
                                  for(var i=0;i<li.length;i++){
                                              li[i].className = ' ';
                                              div[i].style.display='none';
                                      };
                                          this.className='current';
                                          div[this.index].style.display='block';
                                      }
                      }
              
                      //采用事件委托处理
                      var oul = document.getElementById('ul');
                      var ali = ul.getElementsByTagName('li');
                      var content = document.getElementById('content');
                      var div = content.getElementsByTagName('div');
      
                      
                          //ali[i].index = i;
                          oul.onclick = function(ev) {
      
                          var ev = ev || window.event;
                          var target = ev.target || ev.srcElement;
      
                          if(target.nodeName.toLowerCase() == "li"){
      
                          for(var i=0, len=ali.length; i<len; i++){
                              
                              if(ali[i] == target){
                                  //alert(ali[i]);
                                  ali[i].className = "current";
                                  div[i].style.display = "block";
                              }
                              else{
      
                                      ali[i].className = "";
                                      div[i].style.display = "none";
                                  }
                              }
                          }
                      }
                  //jquery实现更方便
                  $('#ul li').click(function(){
                      //点击li的时候要切换样式
                      $(this).addClass('current').siblings().removeClass('current');
                      //根据li的索引值,确定div的显示,其他隐藏
                      $('#content>div').eq($(this).index()).show().siblings().hide();
                  });
                  //jquery实现更方便
                  $('#ul li').click(function(){
                      //点击li的时候要切换样式
                  $(this).addClass('current').siblings().removeClass('current').parent().next().find('div').eq($(this).index()).show().siblings().hide();
                          });
              </script>
           </body>
      </html>
  • 相关阅读:
    java的(PO,VO,TO,BO,DAO,POJO)类名包名解释
    职业规划
    linux定时执行工具crontab 详解
    Apache Commons 工具类介绍及简单使用
    WebApi返回类型设置为json的三种方法
    ASP.net Web API综合示例
    C#进阶系列——WebApi异常处理解决方案
    C#进阶系列——WebApi接口返回值类型详解
    C#进阶系列——WebApi 身份认证解决方案:Basic基础认证
    •C#进阶系列——WebApi接口测试工具:WebApiTestClient
  • 原文地址:https://www.cnblogs.com/double405/p/4634560.html
Copyright © 2020-2023  润新知