JavaScript仿网易选项卡制作代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript仿网易选项卡制作代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11113字，纯文字阅读大概需要16分钟。
内容图文
如果你的页面只有一个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名就直接获取。
以上就是本文的全部内容，希望对大家有所帮助，希望大家继续关注脚本之家的最新内容。
内容总结
以上是互联网集市为您收集整理的JavaScript仿网易选项卡制作代码全部内容，希望文章能够帮你解决JavaScript仿网易选项卡制作代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】