网页选项卡

最新推荐文章于 2021-06-04 00:24:16 发布
最新推荐文章于 2021-06-04 00:24:16 发布
阅读量1.7k 收藏
点赞数
文章标签： div class javascript menu border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ld191474639/article/details/7917231
版权

导入8-9.CSS

body{
	margin:10px;
}
#content{								/* 具体内容 */
	border-left:1px solid #11a3ff;		/* 左边框 */
	border-right:1px solid #11a3ff;		/* 右边框 */
	border-bottom:1px solid #11a3ff;	/* 下边框 */
	padding:15px;
	font-size:12px;
}
ul#tabnav{
	list-style-type:none;
	margin:0px;
	padding-left:0px;					/* 左侧无空隙 */
	padding-bottom:23px;
	border-bottom:1px solid #11a3ff;	/* 菜单的下边框 */
	font:bold 12px verdana, arial;
}
ul#tabnav li{
	float:left;
	height:22px;
	background-color:#a3dbff;
	margin:0px 3px 0px 0px;	
	border:1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
	display:block;						/* 块元素 */
	color:#006eb3;
	text-decoration:none;
	padding:5px 10px 3px 10px;
}
ul#tabnav a:hover{
	background-color:#006eb3;
	color:#FFFFFF;
}
body#home li.home, body#news li.news,	/* 当前页面的菜单项 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
	border-bottom:1px solid #FFFFFF;	/* 白色下边框，覆盖<ul>中的蓝色下边框 */
	color:#000000;
	background-color:#FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited,	/* 当前页面的菜单项的超链接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited,
body#nextstation li.nextstation a:link, body#nextstation li.nextstation a:visited,
body#blog li.blog a:link, body#blog li.blog a:visited{
	color:#000000;
	background-color:#FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover,
body#nextstation li.nextstation a:hover,
body#blog li.blog a:hover{
	color:#006eb3;
	text-decoration:underline;
}


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="8-9.css" rel="stylesheet" />
<style type="text/css">


#leftpic{
	width:160px;
	float:left;
	padding-right:15px;
}
#leftpic a:link, #leftpic a:visited{
	color:#006eb3;
	text-decoration:none;
}
#leftpic a:hover{
	color:#000000;
	text-decoration:underline;
}
img{
	border:1px solid #0066b0;
	margin-bottom:5px;
}
ul#list{
	list-style-type:none;
	margin:0px;
	padding:5px 0px 5px 2px;
}
ul#list li{
	line-height:18px;
}
ul#list li a:link{
	color:#000000;
	text-decoration:none;
}
ul#list li a:visited{
	color:#333333;
	text-decoration:none;
}
ul#list li a:hover{
	color:#006eb3;
	text-decoration:underline;
}
ul#llist li a:active{
border-bottom:1px solid #FFFFFF;
color:#000000;
background-color:#FFFFFF;
}
.hide{display:none; }
.tab_box { clear:both; border:1px solid #11a3ff; height:120px;
font-size:12px;
padding:15px;}
.home{
border-bottom:1px solid #FFFFFF;
color:#000000;
background-color:#FFFFFF;
}
</style>
<script language="javascript" src="jquery-1.1.3.1.min.js"></script>
<script language="javascript">
$(function(){
var $div_li=$("div.tab_menu ul li");
$div_li.mouseover(function(){
  
			$(this).addClass("home")            //当前<li>元素高亮
				   .siblings().removeClass("home");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
					.eq(index).show()   //显示 <li>元素对应的<div>元素
					.siblings().hide(); //隐藏其它几个同辈的<div>元素
		
});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页选项卡</title>
</head>

<body id="home">
<div class="tab" style="left:0px;">
	<div class="tab_menu">
		<ul id="tabnav">
			<li class="home"><a href="8-9_home.html">首页</a></li>
	<li ><a href="8-9_news.html">新闻</a></li>
	<li ><a href="8-9_sports.html">体育</a></li>
	<li ><a href="8-9_music.html">音乐</a></li>
	<li><a href="8-9_nextstation.html">下一站</a></li>
	<li ><a href="8-9_blog.html">博客</a></li>
		</ul>
	</div>
	<div class="tab_box" style="left:0px;"> 
		 <div><span id="leftpic">
		<a href="#"><img src="pic1.jpg"><br>
		<center>追忆往事，展望未来</center></a>
	</span>
	<ul id="list">
		<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="hide">体育</div>
		 <div class="hide">娱乐</div>
         <div class="hide">动画</div>
         <div class="hide"><span id="leftpic">
		<a href="#"><img src="pic2.jpg"><br>
		<center>追忆往事，展望未来</center></a>
	</span>
	<ul id="list">
		<li>1. 在列车出发前，请将自己的手机置于无声状态。</li>
		<li>2. 遵守乘车秩序，不要抢占座位。</li>
		<li>3. 请勿在车厢内大声喧哗，或随意投弃杂物。</li>
		<li>4. 本次列车全部为无烟列车，车厢内严禁吸烟。</li>
		<li>5. 严禁携带易燃易爆等危险物品上车。</li>
		<li>6. 如需在车厢内拍照，请勿使用闪光灯。</li>
		<li>7. 请保持通道畅通，并留意距您最近的安全出口。</li>
	</ul></div>
         <div class="hide">博客</div>
	</div>
</div>
</body>
</html>


 第2种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 *{ margin:0; padding:0;}
 body { font:15px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:500px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:5px solid #898989; height:1000px;
 min-width:900px;}
 .hide{display:none; }
</style>
<script language="javascript" src="file:///E|/js/jquery/jquery-1.1.3.1.min.js"></script>
<script language="javascript">
$(function(){
var $div_li=$("div.tab_menu ul li");
$div_li.mouseover(function(){
  
			$(this).addClass("selected")            //当前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
					.eq(index).show()   //显示 <li>元素对应的<div>元素
					.siblings().hide(); //隐藏其它几个同辈的<div>元素
		
});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div class="tab" style="left:0px;">
	<div class="tab_menu">
		<ul>
			<li class="selected">精彩推荐</li>
			<li>最热电视</li>
			<li>最热电影</li>
            <li>最热动画</li>
            <li>最热音乐</li>
		</ul>
	</div>
	<div class="tab_box" style="left:0px;"> 
		 <div>时事</div>
		 <div class="hide">体育</div>
		 <div class="hide">娱乐</div>
         <div class="hide">动画</div>
         <div class="hide">音乐</div>
	</div>
</div>
</body>
</html>


 

ld191474639
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页中实现选项卡源代码
06-24
JS实现选项卡功能,稍作改动可用在自己的网页上
网页设计HTML如何制作选项卡,jQuery制作网页版选项卡
weixin_33978722的博客
06-04 1500
网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。◦引入所需库◦选项卡原理◦业务核心◦完整小例子引入所需库这个知识点很基础，但是为了照顾fresh man ,我还是写一下吧。选项卡原理选项卡出现其实只是某一个div获取到了显示的权限，其他的没有显示而已。•网页代码选项卡1选项卡2选项卡3选项卡1:这...
选项卡html js代码,JS实现选项卡效果的代码实例
weixin_32503361的博客
06-03 260
JS实现选项卡效果的代码实例发布时间：2020-08-29 01:21:46来源：脚本之家阅读：100作者：liujian_laohan选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。先来布局一个简单的页面：*{margin: 0;padding: 0;list-style: none;}#box{margin: 50px;}#box li{width: 100px...
HTML选项卡效果 完整代码（JavaScript）
weixin_46170671的博客
07-28 2085
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style-type: none; } .title{ display: flex; } .container{ width:
简单实现网页选项卡功能
yyjourney的博客
09-22 963
主要是先遍历导航的子集，根据下标进行对应页面的展示和隐藏， 首先对于第一个页面进行展示，其余的都隐藏，进行遍历之后，就可以实现选项卡功能 $('#navs-item').find('li').click(function(){     var index = $(this).index();     //console.log(index);     $(this).addC
用Juery网页选项卡实现代码
09-05
现在jquery比较流行，很多的选项卡效果可以通过jquery来实现。
JS实现完全语义化的网页选项卡效果代码
10-23
主要介绍了JS实现完全语义化的网页选项卡效果代码,可实现基于鼠标滑过及点击的选项卡切换效果,非常具有实用价值,需要的朋友可以参考下
在html中选项卡怎么做,基于JS实现网页中的选项卡（两种方法）
weixin_30546201的博客
06-03 1189
基于JS实现网页中的选项卡(两种方法)2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了基于JS实现网页中的选项卡(两种方法)，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。方法一：方法一利用简单的代码即可实现，以下是全部的代码；选项卡Box"&gt...
网页选项卡代码
innolux_08的专栏
09-14 1886
html xmlns="http://www.w3.org/1999/xhtml" >head>    title>标题页title>style>.conts{visibility:hidden}.tab{border-top:solid thin #E0E0E0;border-right:solid thin gray;border-left:solid thin #E0E0E0;font-fa
【CSS.DIV】HTML<li>标签
凤凰涅槃
11-29 740
一、实例： <html> <body> <ol> <li>打开冰箱门</li> <li>把大象放进去</li> <li>关上冰箱门</li> </ol><ul> <li>雪碧</li> <li>可乐</li> <li>凉茶</li> </ul> </body> </html>二、定义和用法： 1.（li） 标签定义列表项目 2.标签可用在有序列表（ol）和无
用js语句实现网页中的选项卡（两种方法）
domunweb的博客
06-15 1359
用js语句实现网页中的选项卡方法一：以下是全部的代码；<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} #
一个不错的页面选项卡标签效果源代码
小李专栏
03-09 6748
摘一个很不错的网页选项卡效果的源代码，经测试可用：经常看到人问选项卡或者类似选项卡的切换效果 这里封装了个js，希望对大家有用 所有代码都在下面了代码不多的，只有几k，如果压缩下还要小几k 前面有一处漏了附加样式 修正下。。 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">html>head>meta http-eq
转载一个关于网页制作选项卡的代码
Fubao Zheng的专栏
08-13 981
原文章标题：DIV+CSS实现仿126选项卡tab效果   演示效果截图 用到的图片     <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decor
选项卡例子html,jQuery 网页选项卡的示例代码
weixin_29792607的博客
06-04 144
本节内容：jquery 网页选项卡。例子：复制代码 代码示例:jQuery 选项卡 - www.jbxue.com*{ margin:0; padding:0;}body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}.tab { width:240px;margin:50px;}.tab_menu { clear:both;...
html简单的选项卡
2012013977的博客
04-27 2102
html简单的选项卡
网页选项卡（简洁写法）
zhumengstyle的博客
08-02 4546
在一本书中，发现了一个关于选项卡的简洁思路（只需三行代码），分享一下： //css部分.li_ys li{ display:inline-block; float:left; text-align:center; line-height:30px; font-size:1em; font-wei
c# winform 网页选项卡
最新发布
07-18
### 回答1： c是英文字母表中的第三个字母，也是数字系统中代表100的罗马数字。在计算机科学中，C通常指代编程语言C语言，它是一种编译型语言，由贝尔实验室的Dennis Ritchie于1972年开发。C语言具有简洁、高效和可...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值