JavaScript仿网易选项卡制作代码

2024-05-06 16:32:17

字体：大中小

来源：转载

供稿：网友

如果你的页面只有一个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名就直接获取。

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：Javascript中作用域的详细介绍

下一篇：JavaScript SHA1加密算法实现详细代码