首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript仿网易选项卡制作代码

Posted in Javascript onOctober 06, 2016

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

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

JavaScript仿网易选项卡制作代码

一、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仿网易选项卡制作代码

- Author -

Wendy-lxq

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
javascript json 新手入门文档
Dec 03 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
js中switch case循环实例代码
Dec 30 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
for循环 + setTimeout 结合一些示例(前端面试题）
Aug 30 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
微信小程序实现打卡日历功能
Sep 21 Javascript
Javascript中作用域的详细介绍
Oct 06 #Javascript
js实现非常棒的弹出div
Oct 06 #Javascript
jQuery事件用法详解
Oct 06 #Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 #Javascript
js改变html的原有内容实现方法
Oct 05 #Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 #Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 #Javascript
TableField(1) nginx(76) 子查询(1) mounted(1) 组策略(1) create(1) Windows server 2012(17) 日志格式分析(1)  AD域(1) destoon(1)
You might like
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
你真的了解JavaScript吗？
2007/02/24 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
解决Mac下使用python的坑
2019/08/13 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
美国克罗格超市在线购物：Kroger
2019/06/21 全球购物
护士的岗位职责
2013/12/04 职场文书
授权委托书
2014/07/31 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
护士年终个人总结
2015/02/13 职场文书
工地材料员岗位职责
2015/04/11 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB