仿网易选项卡制作

最新推荐文章于 2019-05-28 08:25:18 发布
最新推荐文章于 2019-05-28 08:25:18 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： HTML & HTML5 JavaScript jQuery 文章标签： javascript html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010297791/article/details/52727318
版权
JavaScript 同时被 3 个专栏收录
52 篇文章 3 订阅
订阅专栏
HTML & HTML5
14 篇文章 6 订阅
订阅专栏
jQuery
8 篇文章 0 订阅
订阅专栏
如果你的页面只有一个tab（选项卡）切换的地方，需要调用js效果，如果单独为了它，还要为页面加载一个jQuery插件，想必是极痛苦的。所有很多时候，jQuery特效也不是万能的，偶尔来个原生的js效果也是必须的。 今天闲着无聊，用js和jquery分别写了一个选项卡的效果，但是其中用到jquery只是为了更好的获取标签以及修改样式。

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

一、Javascript实现
1、html布局 
<div id="box">
	<div class="biaoti">
		<span id="span_xinwen" οnmοuseοver="xianshixinwen()" class="s1">新闻</span>
		<span id="span_tupian" οnmοuseοver="xianshitupian()" class="s2">图片</span>
		<span id="span_junshi" οnmοuseοver="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名就直接获取。

Wendy-lxq
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿网易选项卡的实现
HanDong
03-05 718
android 选项卡
仿网易漂亮的TAB选项卡(标签
09-26
仿网易漂亮的TAB选项卡,简单通用.仿网易漂亮的TAB选项卡,简单通用.
网易Tab选项卡源码及下载
weixin_30610755的博客
11-24 74
仿网易娱乐新闻Tab选项卡的html源码 Code <divclass="leftTitle"> <h2></h2> <h3id="ywhgnav1"class="on"><ahref="javascript:showDiv('ywhg',1,3);"target="_self">最近新贴</a>&...
JS+CSS仿网易的选项卡TAB标签样式-导航菜单类 .
vincent
07-22 974
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  http://www.w3.org/1999/xhtml">    JS+CSS仿网易的选项卡TAB标签样式_网页代码站(www.6a8a.com)>    BODY {   FONT-SIZE: 14px; }  OL LI {   MARG
Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果
weixin_30553065的博客
04-26 57
这里我们用TabLayout来实现这一效果。TabLayout是Android Design Support Library库中的控件。Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加...
JavaScript仿网易选项卡制作代码
12-28
如果你的页面只有一个tab（选项卡）切换的地方，需要调用js效果，如果单独为了它，还要为页面加载一个jQuery插件，想必是极痛苦的。所有很多时候，jQuery特效也不是万能的，偶尔来个原生的js效果也是必须的。今天...
仿网易新闻的首页选项卡设计
01-30
通过选择选项卡上的内容展示不同页面，下方是一个scrollview，scrollview上添加你想与选项卡上的每一项内容对应的view
Android实现类似网易新闻选项卡动态滑动效果
09-01
在Android开发中，实现类似网易新闻选项卡动态滑动效果是一项常见的需求，它能提供用户友好的交互体验，尤其在内容丰富的应用中。这个效果主要通过HorizontalScrollView和RadioButton结合使用来达成，下面是详细的...
Tab选项卡的实现（实例 仿126邮箱）
05-24
仿126邮箱的Div实现Tab选项卡经典实例，直接替换要显示的内容就行，没学过编程的人都会用。
iOS滑动选项卡类型的视图控制器
03-07
iOS滑动选项卡类型的视图控制器，类似网易、腾讯新闻头部。
类似网易163主页的选项卡效果代码
小李专栏
02-16 2631
点击这里使用RSS订阅本Blog： <!-- main_sub="c1s67";more_subs="";--> 类似网易163主页的选项卡效果代码DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
安卓选项卡动态滑动
小白的究极进化
07-05 846
本文会实现一个类似网易新闻（不说网易新闻大家可能不知道大概是什么样子）点击超多选项卡，选项卡动态滑动的效果。  首先来看看布局，就是用HorizontalScrollView控件来实现滑动的效果，里面包含了一个布局。 RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tool
ASP.NET MVC选项卡的实用性
weixin_44549449的博客
05-28 435
选项卡的实用性，在代码中，选项卡可以说是一种基础的方法，而且在代码中很常见，而且实用性很广扩，一般的项目里面都能看见多些用到选项卡的方式 ，选项卡的方式运用起到了很大的作用。 选项卡可以用于页面多重布局，用于多个登录切换等等，用于多个想要可以用到选卡的方法。 用于双重登录的方式，两种登录跳转切换。 在这里插入代码片<div style="width:22.44rem;height:24re...
JS TAB效果126邮箱(同一页面可多次使用)代码
shuanghusun的专栏
11-08 699
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程 Editor:weasle http://www.hxcgw.com Email:weasle@163.com QQ:112011531 --> http://www.w3.org/1999/xhtml"> 简洁Tab body,div,ul,li{ padding:0; text-align:c
自定义可滑动的tab选项卡，可切换选项卡样式(下划线，仿小米三角形，方形背景)
qq_20489601的博客
12-07 3281
下载demo链接：http://download.csdn.net/detail/qq_20489601/9704356 由于在项目开发过程中经常使用到viewPager+fragment实现选项卡的切换功能，每次用的时候都要在activity中重新写一遍相同的代码，所以在空闲时间，我自己自定义了一个各种样式的可滑动的选项卡控件，在实际项目中使用非常方便，下面是此控件的主要代码： 1.要实
微信小程序-仿小米商城-选择商品功能-出现对号
你好！刘斩仙
07-25 1227
仿小米商城-选择商品功能
a标签中href=""的几种用法
热门推荐
Wendy
10-11 23万+
众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法，所以就来整理下a标签中href的几种用法。 一、Js的几种调用方法（参考总结的） 1、a href="javascript:js_method();" 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的h
HTML5高级之position(定位)
Wendy
11-15 8万+
position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。      position一般分为三种，一种是相对定位relative，一种是绝对定位absolute，一种是固定定位fixed，接下来分别说明这三个属性的用法以及相对应的特性，并举例说明。
inno setup 仿网易
最新发布
06-24
仿网易是指使用 Inno Setup 制作类似网易的安装程序。具体来说，可以通过 Inno Setup 实现以下类似网易的功能：选择安装路径、选择组件、安装前检测系统配置、安装后启动程序等。在 Inno Setup 中，以上功能可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值