JavaScript仿网易选项卡制作代码

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

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

一、Javascript实现
1、html布局

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

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

2、css修饰

 
 #box{ 
  height:600px; 
  margin-top: 100px; 
  margin-left: 100px; 
 } 
 #box .biaoti{ 
  font:16px/30px "宋体"; 
  height: 30px; 
  width: 310px; 
  border-top:2px solid #206F96; 
  text-align: center; 
 } 
 #box .biaoti .s1{ 
  width: 102px; 
  height: 29px; 
  border-left: 1px solid #CFCFCF; 
  border-right: 1px solid #CFCFCF; 
  float: left; 
 } 
 #box .biaoti .s2{ 
  width: 102px; 
  height: 29px; 
  border-right: 1px solid #CFCFCF; 
  border-bottom: 1px solid #CFCFCF; 
  background: url(images/1.jpg) repeat-x; 
  float: left; 
 } 
 #box .biaoti .s3{ 
  width: 102px; 
  height: 29px; 
  border-right: 1px solid #CFCFCF; 
  border-bottom: 1px solid #CFCFCF; 
  background: url(images/1.jpg) repeat-x; 
  float: left; 
 } 
 #box .neirong ul{ 
  list-style: none; 
  padding-left: 0px; 
 } 
 #box .neirong ul li{ 
  line-height: 30px; 
  padding-left: 0px; 
 } 
 #box .neirong ul li a:link,#box .neirong ul li a:visited{ 
  text-decoration: none; 
  color:#666; 
  font-size: 16px; 
 } 
 #tupian,#junshi{ 
  display: none; 
 }

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实现

 
$(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名就直接获取。

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

JavaScript仿网易选项卡制作代码

JavaScript相关栏目本月热门文章