鼠标虚滑过选项卡切换效果代码实例

最新推荐文章于 2021-06-03 01:53:47 发布
Return_KB
最新推荐文章于 2021-06-03 01:53:47 发布
阅读量601
点赞数
分类专栏：效果前端js
前端js 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
效果
13 篇文章 0 订阅
订阅专栏
分享一段代码实例，它实现了鼠标滑过，选项卡切换效果。
代码实例如下:
     
     
      
      
       
       
        
         
            
              001 
             
            
              002 
             
            
              003 
             
            
              004 
             
            
              005 
             
            
              006 
             
            
              007 
             
            
              008 
             
            
              009 
             
            
              010 
             
            
              011 
             
            
              012 
             
            
              013 
             
            
              014 
             
            
              015 
             
            
              016 
             
            
              017 
             
            
              018 
             
            
              019 
             
            
              020 
             
            
              021 
             
            
              022 
             
            
              023 
             
            
              024 
             
            
              025 
             
            
              026 
             
            
              027 
             
            
              028 
             
            
              029 
             
            
              030 
             
            
              031 
             
            
              032 
             
            
              033 
             
            
              034 
             
            
              035 
             
            
              036 
             
            
              037 
             
            
              038 
             
            
              039 
             
            
              040 
             
            
              041 
             
            
              042 
             
            
              043 
             
            
              044 
             
            
              045 
             
            
              046 
             
            
              047 
             
            
              048 
             
            
              049 
             
            
              050 
             
            
              051 
             
            
              052 
             
            
              053 
             
            
              054 
             
            
              055 
             
            
              056 
             
            
              057 
             
            
              058 
             
            
              059 
             
            
              060 
             
            
              061 
             
            
              062 
             
            
              063 
             
            
              064 
             
            
              065 
             
            
              066 
             
            
              067 
             
            
              068 
             
            
              069 
             
            
              070 
             
            
              071 
             
            
              072 
             
            
              073 
             
            
              074 
             
            
              075 
             
            
              076 
             
            
              077 
             
            
              078 
             
            
              079 
             
            
              080 
             
            
              081 
             
            
              082 
             
            
              083 
             
            
              084 
             
            
              085 
             
            
              086 
             
            
              087 
             
            
              088 
             
            
              089 
             
            
              090 
             
            
              091 
             
            
              092 
             
            
              093 
             
            
              094 
             
            
              095 
             
            
              096 
             
            
              097 
             
            
              098 
             
            
              099 
             
            
              100 
             
            
              101 
             
            
              102 
             
            
              103 
             
            
              104 
             
            
              105 
             
            
              106 
             
            
              107 
             
            
              108 
             
            
              109 
             
            
              110 
             
            
              111 
             
            
              112 
             
            
              113 
             
            
              114 
             
            
              115 
             
            
              116 
             
            
              117 
             
            
              118 
             
            
              119 
             
            
              120 
             
            
              121 
             
            
              122 
             
            
              123 
             
            
              124 
             
            
              125 
             
            
              126 
             
            
              127 
             
            
              128 
             
            
              129 
             
            
              130 
             
            
              131 
             
            
              132 
             
            
              133 
             
            
              134 
             
            
              135 
             
            
              136 
             
            
              137 
             
            
              138 
             
            
              139 
             
            
              140 
             
            
              141 
             
            
              142 
             
            
              143 
             
            
              144 
             
            
              145 
             
             
              
              <!DOCTYPE html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              > 
              
              
              < 
              title 
              >鼠标滑过，选项卡切换效果</ 
              title 
              > 
              
              
              < 
              style 
              > 
              
              
              * { 
              
              
                 
              margin: 0; 
              
              
                 
              padding: 0; 
              
              
                 
              list-style: none; 
              
              
                 
              font-size: 12px; 
              
              
              } 
              
              
              .tab { 
              
              
                 
              width: 298px; 
              
              
                 
              height: 98px; 
              
              
                 
              margin: 10px; 
              
              
                 
              border: 1px solid #eee; 
              
              
                 
              overflow: hidden; 
              
              
              } 
              
              
              .tab-title { 
              
              
                 
              height: 27px; 
              
              
                 
              position: relative; 
              
              
                 
              background: #f7f7f7; 
              
              
              } 
              
              
              .tab-title ul { 
              
              
                 
              position: absolute; 
              
              
                 
              width: 301px; 
              
              
                 
              left: -1px; 
              
              
              } 
              
              
              .tab-title li { 
              
              
                 
              float: left; 
              
              
                 
              width: 58px; 
              
              
                 
              height: 26px; 
              
              
                 
              line-height: 26px; 
              
              
                 
              text-align: center; 
              
              
                 
              padding: 0 1px; 
              
              
                 
              border-bottom: 1px solid #eee; 
              
              
                 
              overflow: hidden; 
              
              
              } 
              
              
              .tab li a:link, .tab li a:visited { 
              
              
                 
              text-decoration: none; 
              
              
                 
              color: #000; 
              
              
              } 
              
              
              .tab li a:hover { 
              
              
                 
              color: #f90; 
              
              
                 
              font-weight: 700; 
              
              
              } 
              
              
              .tab-title li.select { 
              
              
                 
              background: #fff; 
              
              
                 
              border-bottom-color: #fff; 
              
              
                 
              border-left: 1px solid #eee; 
              
              
                 
              border-right: 1px solid #eee; 
              
              
                 
              padding: 0; 
              
              
              } 
              
              
              .tab .tab-content .tabct { 
              
              
                 
              margin: 10px 10px 10px 19px; 
              
              
              } 
              
              
              .tab .tab-content .tabct ul li { 
              
              
                 
              float: left; 
              
              
                 
              width: 134px; 
              
              
                 
              height: 25px; 
              
              
                 
              overflow: hidden; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script 
              > 
              
              
              function $(id) { 
              
              
                 
              return typeof id == "string" ? document.getElementById(id) : id; 
              
              
              } 
              
              
              window.onload = function() { 
              
              
                 
              var titleName = $("tab-title").getElementsByTagName("li"); 
              
              
                 
              var tabContent = $("tab-content").getElementsByTagName("div"); 
              
              
                 
              if (titleName.length != tabContent.length) { 
              
              
                   
              return; 
              
              
                 
              } 
              
              
                 
              for (var index = 0; index < titleName.length; index++) { 
              
              
                   
              titleName[index].id = index; 
              
              
                   
              titleName[index].onmouseover = function () { 
              
              
                     
              for (var j = 0; j < titleName.length; j++) { 
              
              
                       
              titleName[j].className = ""; 
              
              
                       
              tabContent[j].style.display = "none" 
              
              
                     
              } 
              
              
                     
              this.className = "select"; 
              
              
                     
              tabContent[this.id].style.display = "block"; 
              
              
                   
              } 
              
              
                 
              } 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
                 
              < 
              div  
              class 
              = 
              "tab"  
              id 
              = 
              "tab" 
              > 
              
              
                   
              < 
              div  
              class 
              = 
              "tab-title"  
              id 
              = 
              "tab-title" 
              > 
              
              
                     
              < 
              ul 
              > 
              
              
                       
              < 
              li  
              class 
              = 
              "select" 
              >< 
              a  
              href 
              = 
              "#" 
              >css教程</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >div教程</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >js教程</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >css3教程</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >json教程</ 
              a 
              ></ 
              li 
              > 
              
              
                     
              </ 
              ul 
              > 
              
              
                   
              </ 
              div 
              > 
              
              
                   
              < 
              div  
              class 
              = 
              "tab-content"  
              id 
              = 
              "tab-content" 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "tabct"  
              style 
              = 
              "display:block" 
              > 
              
              
                       
              < 
              ul 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >地址是softwhy.com</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >地址是softwhy.com</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >地址是softwhy.com</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >地址是softwhy.com</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              </ 
              ul 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "tabct"  
              style 
              = 
              "display:none" 
              > 
              
              
                       
              < 
              ul 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >蚂蚁部落欢迎您</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >蚂蚁部落欢迎您</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >蚂蚁部落欢迎您</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >蚂蚁部落欢迎您</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              </ 
              ul 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "tabct"  
              style 
              = 
              "display:none" 
              > 
              
              
                       
              < 
              ul 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >努力才会有美好的未来</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >努力才会有美好的未来</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >努力才会有美好的未来</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >努力才会有美好的未来</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              </ 
              ul 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "tabct"  
              style 
              = 
              "display:none" 
              > 
              
              
                       
              < 
              ul 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >提供免费的基础进阶教程</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >提供免费的基础进阶教程</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >提供免费的基础进阶教程</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >提供免费的基础进阶教程</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              </ 
              ul 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                     
              < 
              div  
              class 
              = 
              "tabct"  
              style 
              = 
              "display: none" 
              > 
              
              
                       
              < 
              ul 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >本站位于青岛市南区</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >本站位于青岛市南区</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >本站位于青岛市南区</ 
              a 
              ></ 
              li 
              > 
              
              
                         
              < 
              li 
              >< 
              a  
              href 
              = 
              "#" 
              >本站位于青岛市南区</ 
              a 
              ></ 
              li 
              > 
              
              
                       
              </ 
              ul 
              > 
              
              
                     
              </ 
              div 
              > 
              
              
                   
              </ 
              div 
              > 
              
              
                 
              </ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >