首页
所有分类
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 相关文章推荐
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
德国购物网站(227) 俄罗斯购物网站(137) 西班牙购物网站(115) 马来西亚购物网站(41) 印尼购物网站(37) 埃及购物网站(2) 瑞士购物网站(28) 印度购物网站(45) 日本购物网站(72) 墨西哥购物网站(16)
You might like
php设置编码格式的方法
2013/03/05 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
JS实现div居中示例
2014/04/17 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
pycharm 使用心得（九）解决No Python interpreter selected的问题
2014/06/06 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python实现最长公共子序列
2018/05/22 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
波兰品牌内衣及泳装网上商店：Astratex.pl
2017/02/03 全球购物
Kangol帽子官网：坎戈尔袋鼠
2018/09/26 全球购物
美国综合购物商城：UnbeatableSale.com
2018/11/28 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
个人整改措施书面材料
2014/10/24 职场文书
优秀团队申报材料
2014/12/26 职场文书
保证书格式
2015/01/16 职场文书
员工自我工作评价
2015/03/06 职场文书
停电调休通知
2015/04/16 职场文书
描述鲁迅的名言整理，一生受用
2019/08/08 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书