首页
所有分类
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代码应该放在HTML代码哪个位置比较好？
Oct 16 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS之相等操作符详解
Sep 13 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
详解javascript replace高级用法
Feb 17 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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
线程池(1) Springboot-cli(1) JAVA(88) 池化技术(1) 主题(1) CompletableFuture(1) ForkJoin(1) FutureTask(3) Android(19) 异步回调(1)
You might like
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
浅析BootStrap中Modal（模态框）使用心得
2016/12/24 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python 模拟登陆的两种实现方法
2017/08/10 Python
python逆向入门教程
2018/01/15 Python
TensorFlow实现创建分类器
2018/02/06 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
Urban Outfitters美国官网：美国生活方式品牌
2016/08/26 全球购物
Desigual英国官网：在线购买原创服装
2018/03/09 全球购物
Ralph Lauren意大利官方网站：时尚界最负盛名的品牌之一
2018/10/18 全球购物
皇家阿尔伯特瓷器美国官网：Royal Albert美国
2020/02/16 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
初三政治教学反思
2014/01/30 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
行政文员岗位职责
2015/02/04 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers
MySQL数据库之存储过程 procedure
2022/06/16 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android