美观实用的标签切换菜单

最新推荐文章于 2024-01-02 20:38:51 发布
最新推荐文章于 2024-01-02 20:38:51 发布
阅读量128 收藏
点赞数
文章标签： javascript ViewUI

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效 WWW.QPSH.COM</title>
<style>
body {
font-family: "宋体";
font-size: 12px;
color: #525252;
}
td {
font-family: "宋体";
font-size: 12px;
color: #525252;
}
a:link {
color: #525252;
font-size: 12px;
text-decoration: none;
}
a:visited{
color: #525252;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #ff6600;
font-size: 12px;
text-decoration: underline;
}
.gd1{
font-family: "宋体";
font-size: 12px;
color: #ff0000;
}

.sec11 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; BORDER-LEFT: #C5E1FE 1px solid; CURSOR: hand; COLOR: #01499A; BORDER-BOTTOM: #C5E1FE 1px solid; BACKGROUND-COLOR: #ffffff}
.sec21 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; FONT-WEIGHT: 800;color:#01499A; BORDER-LEFT: #C5E1FE 1px solid;BORDER-BOTTOM: #C5E1FE 1px solid; CURSOR: hand; BACKGROUND-COLOR: #E6EEF7;BACKGROUND:url('/icon/098.gif') no-repeat}
.main_tab {BACKGROUND-COLOR: #ffffff}
</style>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells

[i].className="sec11";
secTable.cells[n].className="sec21";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies

[i].style.display="none";
mainTable.tBodies

[n].style.display="block";
}
</SCRIPT>
</head>

<body>
<p align="center">这里便于演示，只设置了两个栏目切换，你可以根据需要，自行增加栏目！修改CSS使它更适合你的网站<br>
<br>
<a target="_blank" href="http://www.qpsh.com/">有问题请看这里</a></p>
<div align="center">
<table border="0" width="200" cellpadding="0" cellspacing="0" style="border-collapse: collapse" height="145" id="table7" bgcolor=#ecf5ff>
<tr>
<td height="145">
<div align="center">
<table border="0" width="200" cellpadding="0" style="border-collapse: collapse" height="140" id="table107">
<tr>
<td height="25">
<div align="center">
<table border="0" width="220" cellpadding="0" style="border-collapse: collapse" height="22" id=secTable>
<tr>
<td class=sec21 οnmοuseοver=secBoard(0) width="50%">
<p align="center">菜单特效</td>
<td class=sec11 οnmοuseοver=secBoard(1) width="50%">
<p align="center">网页特效简介</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="115">
<div align="center">
<table id=mainTable border="0" width="195" cellpadding="0" style="border-collapse: collapse" height="115">
<TBODY style="DISPLAY: block"><tr>
<td height="145"><div align="center">
<table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138">
<tr>
<td height="23" width="15" valign="middle">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2277.htm">超酷XP风格网页右键菜单</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2276.htm">通用3级联动菜单</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2275.htm">相当好玩的右键弹出菜单</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2274.htm">用CSS设计的纵向导航条实例</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2272.htm">将网站设为首页的代码</a></td>
</tr>
<tr>
<td height="23" width="195" colspan="2">
<p align="right"><font color="#01499A">
<a target="_blank" href="http://www.qpsh.com/listpage/102_1.htm">
<font color="#01499A">更多</font><font color="#01499A" face="Arial">>>></font></a></font></td>
</tr>
</table>
</div></td>
</tr></TBODY>
<TBODY style="DISPLAY: none"><tr>
<td height="145"><div align="center">
<table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138">
<tr>
<td height="138" width="195" style="line-height: 150%">

<b>
<a target="_blank" href="http://www.qpsh.com/">网页特效</a></b>是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。为网页添加特效，学会添加<a target="_blank" href="http://www.qpsh.com/">网页特效</a>的过程能从一定程度上激发网页初学者更加了解HTML语言的结构。</td>
</tr>
</table>
</div></td>
</tr></TBODY>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>

</html>

iteye_18051
关注
JS面向对象动态添加标签页（梳理思路）
qq_46827043的博客
05-06 1556
自己梳理思路用的
JS标签页效果
03-27
这是实现标签页效果的代码示例，主要展示了两个功能。第一档鼠标放在标签上是，对应显示相应内容。第二当点击相应标签时内容区域装载不同页面。
jQuery很漂亮的标签切换样式
04-12
jQuery很漂亮的标签切换样式 分享给大家 接触jquery感觉很神奇 希望和大家多多交流吧
js标签页
yszbrzdd的博客
09-15 548
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="widt
js 标签页
qq_38674970的博客
01-02 267
Document 教育 培训 出国 1 2 3 *{ list-style:none; padding:0; margin:0; } .tabs{ width: 266px; height: 35px; background-color: #f4
又一款漂亮精致的标签切换菜单特效代码
03-20
js实现tab标签页
weixin_43157199的博客
03-11 2033
核心思想 点击tab标签后将此标签所对应的标签页的display设置为block，其它标签页权威none &lt;div id="send"&gt; &lt;span class="sen1"&gt;编辑推荐&lt;/span&gt; &lt;span id="but1" class
美观实用的标签切换菜单特效代码
03-20
美观实用的标签切换菜单.rar
07-04
美观实用的标签切换菜单
简洁的菜单标签切换
04-19
简洁的菜单标签切换，简单明了。用用非常方便
实用的标签切换菜单效果.rar
07-04
总的来说，“实用的标签切换菜单效果”是一个结合了HTML、CSS和JS技术的优秀实践案例，它可以帮助开发者创建一个既美观又功能强大的网页导航系统。通过学习和应用这个压缩包中的资源，不仅可以提升网站的互动性，也...
左侧点击菜单tab切换网页特效
11-22
在IT行业中，网页交互设计是用户体验...通过合理的菜单设计、有效的JavaScript实现和美观的动画效果，可以构建出既实用又吸引人的网页界面。同时，考虑到性能、响应式和无障碍性等因素，可以进一步提升整体的用户体验。
JavaScript面向对象—— 动态创建tab标签页
爱前端的程序媛的博客
05-04 3787
昨天呢，介绍了js中类的概念，以及使用类创建对象的过程。今天就用js中的类实现一个小的功能，动态添加、删除标签页。emmmmm，也有点像tab栏切换，不过比tab栏切换多了添加和删除的功能。 案例说明 js动态实现标签页的创建和删除。这个案例呢，要用类来实现，Tab就是本次案例的类。但在写之前需要来分析并抽象类的特征和行为，也就是对应的类的属性和方法。 这里呢，我把元素的ID作为属性，增删改查的四...
JS新标签页打开，让你的网站访问更加便捷
希望看完文章的你能够带着答案离开
06-05 5936
JS新标签页打开，让你的网站访问更加便捷
漂亮的TAB标签切换
yuanbo_520的博客
07-28 590
【代码】漂亮的TAB标签切换。
基于Bootstrap实现tab标签切换效果
11-24
在本文中，我们将深入探讨如何使用Bootstrap框架来创建一个具有标签切换效果的用户界面。Bootstrap是一种流行的开源前端开发框架，它提供了一套响应式布局、移动设备优先的Web开发工具，使得开发者能够快速构建美观...
菜单标签切换
04-19
菜单标签切换,点击菜单无刷新切换，非常方便..
整理用js实现tab标签页
qq_15150903的博客
04-19 758
首先是css样式，比如这样的： 1 &lt;style&gt; 2 *{ 3 margin:0; 4 padding: 0; 5 list-style: none; 6 font-size: 12px; 7 } 8 .notice{ 9 ...
JS实现标签页切换效果
alct84178的博客
06-26 3176
　　 本文实例为大家分享了JS标签页切换的具体代码，供大家参考，具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37...
在javascript环境实现web多标签页
最新发布
Byte Madman
01-02 1029
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。本例一共有1个主页面，6个标签页面，1个js脚本文件，1个CSS层叠式样式表文件。来实现多标签页功能，当选择某一个标签时，显示不同的标签页文件。这6个标签页文件可以一样，也可以稍作改动，方便测试页面的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值