JavaScript仿网易选项卡制作代码_javascript技巧

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

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

一、Javascript实现
1、html布局

<div id="box">
 <div class="biaoti">
  <span id="span_xinwen" onmouseover="xianshixinwen()" class="s1">新闻</span>
  <span id="span_tupian" onmouseover="xianshitupian()" class="s2">图片</span>
  <span id="span_junshi" onmouseover="xianshijunshi()" class="s3">军事</span>
 </div>
 <div class="neirong">
  <div class="info" id="xinwen">
   <ul>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    <li><a href="####">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
   </ul>
  </div>
  <div class="info" id="tupian">
   <ul>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
    <li><a href="####">图片图片图片图片图片图片图片图片图片</a></li>
   </ul>
  </div>
  <div class="info" id="junshi">
   <ul>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
    <li><a href="####">军事军事军事军事军事军事军事军事军事</a></li>
   </ul>
  </div>
 </div>
</div>

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

2、css修饰

<style type="text/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;
 }
 </style>

3、js效果实现

<script type="text/javascript">
 function xianshitupian(){
  //让图片内容显示出来
  document.getElementById("tupian").style.display="block";
  //让新闻的内容隐藏
  document.getElementById("xinwen").style.display="none";
  //让军事的内容隐藏
  document.getElementById("junshi").style.display="none";
  //让图片的背景隐藏
  document.getElementById("span_tupian").style.background="none";
  //让新闻的背景加上图片
  document.getElementById("span_xinwen").style.background="url(images/1.jpg) repeat-x";
  //让军事的背景加上图片
  document.getElementById("span_junshi").style.background="url(images/1.jpg) repeat-x";
  //让图片的下划线隐藏
  document.getElementById("span_tupian").style.borderBottom="none";
  //让新闻的下划线加上
  document.getElementById("span_xinwen").style.borderBottom="1px solid #CFCFCF ";
  //让军事的下划线加上
  document.getElementById("span_junshi").style.borderBottom="1px solid #CFCFCF ";
 }
 function xianshijunshi(){
  //让军事内容显示出来
  document.getElementById("junshi").style.display="block";
  //让新闻的内容隐藏
  document.getElementById("xinwen").style.display="none";
  //让图片的内容隐藏
  document.getElementById("tupian").style.display="none";
  //让军事的背景隐藏
  document.getElementById("span_junshi").style.background="none";
  //让新闻的背景加上图片
  document.getElementById("span_xinwen").style.background="url(images/1.jpg) repeat-x";
  //让图片的背景加上图片
  document.getElementById("span_tupian").style.background="url(images/1.jpg) repeat-x";
  //让军事的下划线隐藏
  document.getElementById("span_junshi").style.borderBottom="none";
  //让新闻的下划线加上
  document.getElementById("span_xinwen").style.borderBottom="1px solid #CFCFCF ";
  //让图片下划线加上
  document.getElementById("span_tupian").style.borderBottom="1px solid #CFCFCF ";
 }
 function xianshixinwen(){
  //让新闻内容显示出来
  document.getElementById("xinwen").style.display="block";
  //让图片的内容隐藏
  document.getElementById("tupian").style.display="none";
  //让军事的内容隐藏
  document.getElementById("junshi").style.display="none";
  //让新闻的背景隐藏
  document.getElementById("span_xinwen").style.background="none";
  //让图片的背景加上图片
  document.getElementById("span_tupian").style.background="url(images/1.jpg) repeat-x";
  //让军事的背景加上图片
  document.getElementById("span_junshi").style.background="url(images/1.jpg) repeat-x";
  //让新闻的下划线隐藏
  document.getElementById("span_xinwen").style.borderBottom="none";
  //让图片的下划线加上
  document.getElementById("span_tupian").style.borderBottom="1px solid #CFCFCF ";
  //让军事下划线加上
  document.getElementById("span_junshi").style.borderBottom="1px solid #CFCFCF ";
 }
</script>

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

二、jquery实现
1、html布局

<div class="box">
  <div class="title">
   <button class="btn btn-news">新闻</button>
   <button class="btn btn-pic">图片</button>
   <button class="btn btn-aff">军事</button>
  </div>
  <div class="contents">
   <div class="info" id="news">
    <ul>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
     <li><a href="#">新闻新闻新闻新闻新闻新闻新闻新闻新闻</a></li>
    </ul>
   </div>
   <div class="info" id="pictures">
    <ul>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
     <li><a href="#">图片图片图片图片图片图片图片图片图片</a></li>
    </ul>
   </div>
   <div class="info" id="affairs">
    <ul>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
     <li><a href="#">军事军事军事军事军事军事军事军事军事</a></li>
    </ul>
   </div>
  </div> 

 </div>

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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
选项卡
javascript做选项卡、javascript选项卡、javascript选项卡切换、javascript选项卡代码、javascript tab选项卡，以便于您获取更多的相关知识。

时间： 2024-09-26 02:23:17

JavaScript仿网易选项卡制作代码_javascript技巧的相关文章

JS+CSS实现仿msn风格选项卡效果代码_javascript技巧

本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

JavaScript版TAB选项卡效果实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

JavaScript仿静态分页实现方法_javascript技巧

本文实例讲述了JavaScript仿静态分页实现方法.分享给大家供大家参考.具体如下: 这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE> 静态分页</TITLE> <style> * {

js实现类似菜单风格的TAB选项卡效果代码_javascript技巧

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

JS实现不规则TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="C

JS实现黑色风格的网页TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款网页TAB选项卡JS代码,黑色超酷的风格,看了后你会喜欢的,很熟悉很经典的风格,似曾相识的感觉,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

JavaScript实现自动切换图片代码_javascript技巧

本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

6种javascript显示当前系统时间代码_javascript技巧

第一种:javascript显示当前系统时间代码 2015年12月1日 12:05:08 星期二 <div id="jnkc"> </div> <script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); </script> 第二种:javascri

JS+CSS实现的经典tab选项卡效果代码_javascript技巧

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio