JavaScript仿网易选项卡制作代码

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

以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注我们的最新内容。

(0)

相关推荐

  • 很棒的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth

  • 基于javascript实现最简单的选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &

  • javascript css红色经典选项卡效果实现代码

    本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font

  • 很实用的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px; p

  • 轻松实现js选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --> <ul class="tab_menu"> <li class="selected">房产</li> <li>家居</li> <li>二手房</li> </ul> <div class="tab_box"> <div> 275万购昌平邻铁

  • 原生js实现tab选项卡切换

    本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

  • 分步解析JavaScript实现tab选项卡自动切换功能

    本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

  • 很棒的js Tab选项卡切换效果

    本文实例为大家分享了js Tab选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; over

  • 基于javascript实现tab选项卡切换特效调试笔记

    本文实例为大家分析了javascript实现tab选项卡切换的调试笔记,供大家参考,具体内容如下 制作导航栏,点击导航栏元素时下面的内容会产生相应的变化,并且该元素显示特殊样式. js源代码: //导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏

  • JavaScript仿网易选项卡制作代码

    如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的.所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的.今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式. 先来浏览一下效果图吧~~ 一.Javascript实现 1.html布局 <div id="box"> <div class="

  • Javascript 仿歌词智能滚动代码

    保证浏览者能看清楚文字,然后继续上下滚动. 文本滚动 #infozone{font-size:12px;color:#aa6;overflow:hidden;width:98px;height:20px;} #infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;} var tc; window.onload=function(){ var o=document.getElementById('i

  • js实现简单选项卡制作

    本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下 实现功能 通过点击按钮查看相应的介绍: 按钮相应的变色: 内容相应的切换: html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

  • JS+CSS实现仿msn风格选项卡效果代码

    本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • 基于jQuery实现的仿百度首页滑动选项卡效果代码

    本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码.分享给大家供大家参考,具体如下: 今天给大家分享一款基于jQuery的仿百度首页滑动选项卡,可实现tab选项卡内容上下翻滚切换的功能.这款选项卡适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-baidu-hd-nav-style-codes/ 完整实例代码代码点击

  • Android仿网易新闻图片详情下滑隐藏效果示例代码

    前言 本文主要给大家分享了Android仿网易新闻图片详情下滑隐藏效果的相关内容,分享出来供需要的朋友参考学习,下面话不多说了,来一起看看详细的介绍吧 效果图: 实例代码 public class InfoTextView extends AutoRelativeLayout { private Context context; private int lastY; private int offY; private int MIN_HEIGHT = 600; public InfoTextVi

  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

  • js实现仿网易点击弹出提示同时背景变暗效果

    本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果.分享给大家供大家参考.具体如下: 这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/ 具体代码如下: <html> <head> <title>点击弹出提示,背景变暗</title> <script> func

  • JavaScript仿小米商城官网完整页面实现流程

    目录 一.首页的制作 1.下载APP的制作 2.导航栏的制作 3.轮播图的制作 二.登录.注册页面的制作 1.盒子布局 2.复选框样式更改 三.页面跳转 不知不觉学习前端已经快4个月啦,之前没学JavaScript之前做的项目都只能看不能玩,小米官网这个页面算上写出的第一个相对完整一点的项目,虽然需要进步的地方还有很多,但是未来可期! 本篇博客主要是针对在书写这个项目时遇到的一些问题,找出对应的方法,记录一下自己在写这个项目时踩过的坑. 一.首页的制作 首页的主要效果有如下几个: 下载APP.购

随机推荐