简单选项卡

最新推荐文章于 2021-06-21 10:53:45 发布

weixin_30411819

最新推荐文章于 2021-06-21 10:53:45 发布

阅读量152

点赞数

原文链接：http://www.cnblogs.com/hilxj/p/10418984.html

版权

 
   <!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 
   >选项卡效果 
   </ 
   title 
   > 
  
 
   < 
   style 
   > 
  
 
   img{ 
   border: 
   none; 
   vertical-align: 
   top} 
  
 
   #box{ 
   width: 
   640px; 
   height: 
   270px; 
   position: 
   relative; } 
  
 
   #box ul{ 
   width: 
   640px; 
   height: 
   270px; 
   position: 
   relative; } 
  
 
   #box ul li{ 
   width: 
   640px; 
   height: 
   270px; 
   position: 
   absolute; 
   list-style-type: 
   none;} 
  
 
   #box ol { 
   position: 
   absolute; 
   right: 
   50px; 
   bottom: 
   30px;} 
  
 
   ol li{ 
   width: 
   20px; 
   height: 
   20px; 
   margin: 
   3px; 
   float: 
   left; 
   list-style-type: 
   none; 
   background: 
   #fff; 
   color: 
   #f60; 
   text-align: 
   center} 
  
 
   ol .active{ 
   background: 
   #f60 ; 
   color: 
   #fff ;} 
  
 
   < 
   / 
   style 
   > 
  
 
   </ 
   head 
   > 
  
 
   < 
   body 
   > 
  
 
   < 
   div 
   id= 
   "box" 
   > 
  
 
   < 
   ul 
   > 
  
 
   < 
   li 
   style= 
   "display:block" 
   >< 
   img 
   src= 
   "images/1.jpg" 
   alt= 
   "" 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   img 
   src= 
   "images/2.jpg" 
   alt= 
   "" 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   img 
   src= 
   "images/3.jpg" 
   alt= 
   "" 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   img 
   src= 
   "images/4.jpg" 
   alt= 
   "" 
   ></ 
   li 
   > 
  
 
   < 
   li 
   >< 
   img 
   src= 
   "images/5.jpg" 
   alt= 
   "" 
   ></ 
   li 
   > 
  
 
   </ 
   ul 
   > 
  
 
   < 
   ol 
   > 
  
 
   < 
   li 
   class= 
   "active" 
   >1 
   </ 
   li 
   > 
  
 
   < 
   li 
   >2 
   </ 
   li 
   > 
  
 
   < 
   li 
   >3 
   </ 
   li 
   > 
  
 
   < 
   li 
   >4 
   </ 
   li 
   > 
  
 
   < 
   li 
   >5 
   </ 
   li 
   > 
  
 
   </ 
   ol 
   > 
  
 
   </ 
   div 
   > 
  
 
   < 
   script 
   > 
  
 
   var 
   oul= 
   document. 
   getElementsByTagName( 
   'ul')[ 
   0]; 
  
 
   var 
   uli= 
   oul. 
   getElementsByTagName( 
   'li'); 
  
 
   var 
   ool= 
   document. 
   getElementsByTagName( 
   'ol')[ 
   0]; 
  
 
   var 
   oli= 
   ool. 
   getElementsByTagName( 
   'li'); 
  
 
   for( 
   var 
   i= 
   0; 
   i< 
   oli. 
   length; 
   i++){ 
  
 
   oli[ 
   i]. 
   index= 
   i; 
  
 
   oli[ 
   i]. 
   onmouseover= 
   function(){ 
  
 
   for( 
   var 
   i= 
   0; 
   i< 
   oli. 
   length; 
   i++){ 
  
 
   oli[ 
   i]. 
   className= 
   ''; 
  
 
   uli[ 
   i]. 
   style. 
   display= 
   'none' 
  

    } 
  
 
   this. 
   className= 
   'active'; 
  
 
   uli[ 
   this. 
   index]. 
   style. 
   display= 
   'block' 
  

    } 
  

    } 
  

 
   < 
   / 
   script 
   > 
  
 
   </ 
   body 
   > 
  
 
   </ 
   html 
   > 
  

转载于:https://www.cnblogs.com/hilxj/p/10418984.html

weixin_30411819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单选项卡

<!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-Com...
复制链接

扫一扫