JavaScript仿网易选项卡制作代码

如果你的页面只有一个tab（选项卡）切换的地方，需要调用js效果，如果单独为了它，还要为页面加载一个jQuery插件，想必是极痛苦的。所有很多时候，jQuery特效也不是万能的，偶尔来个原生的js效果也是必须的。今天闲着无聊，用js和jquery分别写了一个选项卡的效果，但是其中用到jquery只是为了更好的获取标签以及修改样式。

先来浏览一下效果图吧~~

一、Javascript实现
1、html布局

 
 
 
  新闻 
  图片 
  军事 
 
 
 
 
  
 
   
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
   
 
  
 
  
 
   
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
    
图片图片图片图片图片图片图片图片图片
 
   
 
  
 
  
 
   
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
    
军事军事军事军事军事军事军事军事军事
 
   
 
  
 
 
  
 

布局很简单，其实就是两个div，第一个div中存放按钮，第二个div中存放内容。

2、css修饰

3、js效果实现

js写起来其实很简单，最重要的目的就是修改样式和制作动画。

二、jquery实现
1、html布局

 
  
 
   新闻 
   图片 
   军事 
  
 
  
 
   
 
    
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
     
新闻新闻新闻新闻新闻新闻新闻新闻新闻
 
    
 
   
 
   
 
    
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
     
图片图片图片图片图片图片图片图片图片
 
    
 
   
 
   
 
    
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
     
军事军事军事军事军事军事军事军事军事
 
    
 
   
 
  
 
 
 
 

2、css修饰

body{ 
 margin:0px; 
 padding:0px; 
} 
li{ 
 list-style: none; 
} 
a{ 
 text-decoration: none; 
} 
button{ 
 border:none; 
} 
input,button,select,textarea{ 
 outline:none; 
} 
.box{ 
 height:600px; 
 margin-top: 100px; 
 margin-left: 100px; 
} 
.title{ 
 font:16px/30px "宋体"; 
 height: 30px; 
 width: 306px; 
 border-top:2px solid #206F96; 
} 
.title .btn{ 
 width:102px; 
 height: 29px; 
 font-size: 16px; 
} 
.title .btn-news{ 
 border-left: 1px solid #CFCFCF; 
 border-right: 1px solid #CFCFCF; 
 float: left; 
 background: #fff; 
} 
.title .btn-pic{ 
 border-right: 1px solid #CFCFCF; 
 border-bottom: 1px solid #CFCFCF; 
 background: url(../images/1.jpg) repeat-x; 
 float: left; 
} 
.title .btn-aff{ 
 border-right: 1px solid #CFCFCF; 
 border-bottom: 1px solid #CFCFCF; 
 background: url(../images/1.jpg) repeat-x; 
 float: left; 
} 
.contents ul{ 
 padding-left:10px; 
} 
.contents ul li+li{ 
 line-height:29px; 
} 
.contents ul li a{ 
 color: #666; 
} 
.contents ul li:hover,.contents ul li:visited,.contents ul li a:hover ,.contents ul li a :visited{ 
 color: #68a3ff; 
} 
#pictures,#affairs{ 
 display: none; 
} 

3、js实现

/** 
 * Created by lxq on 2016/10/3. 
 */ 
$(document).ready(function(){ 
 $(".title .btn-pic").click(function(){ 
  $("#pictures").css({ "display": "block"}); 
  $("#news").css({ "display": "none"}); 
  $("#affairs").css({ "display": "none"}); 
 
  $(".btn-pic").css({ "border-bottom": "none","background-image":"none"}); 
  $(".btn-news").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); 
  $(".btn-aff").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); 
 }); 
 
 $(".title .btn-aff").click(function(){ 
  $("#affairs").css({ "display": "block"}); 
  $("#news").css({ "display": "none"}); 
  $("#pictures").css({ "display": "none"}); 
 
  $(".btn-aff").css({ "border-bottom": "none","background-image":"none"}); 
  $(".btn-pic").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); 
  $(".btn-news").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); 
 }); 
 
 $(".title .btn-news").click(function(){ 
  $("#news").css({ "display": "block"}); 
  $("#affairs").css({ "display": "none"}); 
  $("#pictures").css({ "display": "none"}); 
 
  $(".btn-news").css({ "border-bottom": "none","background-image":"none"}); 
  $(".btn-pic").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); 
  $(".btn-aff").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"}); 
 }); 
}); 

使用jquery最大的好处就是在获取标签的时候很方便，直接通过$和class名或者id名就直接获取。 

以上就是本文的全部内容，希望对大家有所帮助，希望大家继续关注脚本之家的最新内容。