`
liudaoru
  • 浏览: 1575954 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

TAB式导航栏的快捷实现(IE & FF)

    博客分类：
  • Ajax
IECSSJavaScriptHTML脚本 
阅读更多

应同事要求做了一个，效果如下：

 

当鼠标移上时变色。

没有使用脚本，纯粹通过css实现。同时通过调整背景图片位置的方式解决图片的闪动，主要代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>TRS -- 导航</title>
		<script type="text/javascript">

		</script>
		<style type="text/css">
			#sys_menu a {width:106px;height:34px;display:block;float:left;background:url(btn.gif) 0px 0px no-repeat;font-family:"宋体";text-align:center;color:#fff;font-size:14px;font-weight:600;text-decoration:none;}
			#sys_menu a:hover, #sys_menu a.on {background:url(btn.gif) -106px 0px no-repeat;}
			#sys_menu a span {line-height:34px;}
		</style>
	</head>
	<body style="position:relative;overflow:hidden;">
		<div id="sys_menu">
			<a href="#" class="on"><span>首页</span></a><a href="#"><span>公司介绍</span></a><a href="#"><span>主要产品</span></a><a href="#"><span>奥运专题</span></a>
		</div>
	</body>
</html>

 

span主要是为以后做扩充而留的。

  • 描述: 页面效果
  • 大小: 5.4 KB
  • 描述: 用来做背景的图片
  • 大小: 3.2 KB
2
顶
2
踩
分享到：
| Firefox的默认样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android垂直tab导航栏、左侧竖直tab导航栏

    "Android垂直tab导航栏、左侧竖直tab导航栏"是一个创新的界面设计，它为Android应用提供了更灵活、更个性化的导航方案，同时也对开发者的技术能力提出了新的挑战，需要掌握自定义View、布局管理、动画实现等相关技能...

    Tab导航栏收集

    Tab导航栏的实现方式多样，可以根据不同的编程语言、框架和库进行定制。本资源"Tab导航栏收集"显然是一个汇总了多种Tab切换实现代码的集合，方便开发者参考和学习。 1. **基础概念**： - Tab导航：Tab是一种UI元素...

    左侧竖直tab导航栏

    综上所述，"左侧竖直tab导航栏"是提升移动应用用户体验的一种有效方法，而VerticalTabLayout+ViewPager的组合则提供了实现这一设计的强大工具。通过理解和熟练运用这些技术，开发者可以创建出更加符合用户习惯的、...

    Android之新闻客服端顶部导航栏Tab点击和左右滑动实现切换界面

    APP市场中大多数新闻App都有导航菜单，随着版本迭代的更新，带来了许多控件，使用新控件让你更方便实现导航栏。 博客地址：http://blog.csdn.net/dickyqie/article/details/55253562

    小程序多种今日头条顶部tab导航栏标签效果实现，带部分注释。

    本项目实现了小程序中类似今日头条的多种顶部Tab导航栏标签效果，为用户提供流畅的滑动体验，并与页面内容无缝联动。下面我们将详细探讨这一实现过程及其关键知识点。 首先，我们要理解小程序的架构。小程序基于...

    网页导航栏tab切换

    本资源针对“网页导航栏tab切换”提供了一种实现方案，特别适合那些希望为自己的网站添加动态、炫酷效果的开发者。下面将详细探讨这个主题。 一、JavaScript在导航栏中的应用 JavaScript是一种强大的客户端脚本语言...

    Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    本文将详细介绍如何使用`TabLayout`和`ViewPager`在Android应用中实现底部Tab导航栏。 首先，我们需要在项目的`build.gradle`文件中引入`Android Design Support Library`。在`dependencies`块中添加以下依赖： ``...

    CSS网页导航栏样式制作软件

    尽管这个软件没有折叠导航栏的功能，但用户仍然可以通过其他方式实现这一效果，例如使用CSS的`:hover`伪类来实现鼠标悬停时的折叠效果，或者利用JavaScript来添加动态交互。 在压缩包中的文件`csstabdesigner2.exe`...

    导航栏生成器CSS Tab Designer.zip

    【CSS Tab Designer】是一款强大的在线工具，专门用于创建和设计美观、响应式的导航栏。它基于CSS（层叠样式表）技术，使开发者能够轻松定制和预览网页的Tab式导航结构。通过这款生成器，你可以快速制作出适应不同...

    RadioButton_Fragment_Tab实现底部导航栏

    本教程将详细讲解如何使用RadioButton和Fragment来实现这样的底部导航栏。 首先，我们需要理解RadioButton的基本概念。RadioButton是Android中的单选按钮控件，属于RadioGroup的一部分。RadioGroup是一个可以包含多...

    IE Tab Chrome 插件,切换IE内核

    2. **兼容性**: IE Tab 支持多种IE版本，如IE5、IE6、IE7、IE8、IE9、IE10和IE11，满足不同网站的需求。 3. **书签同步**: 与Chrome的书签同步功能兼容，方便用户管理网页链接。 4. **隐私保护**: 在使用IE Tab时，...

    8套-多功能响应式UI组件网页模板源码合集-适配移动端设备-header&导航栏&文章列表&tab页等.zip

    它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的...

    layui点击导航栏刷新tab页的示例代码

    在Layui的tab组件中，若要实现点击导航栏切换tab页时能够刷新内容，可以利用Layui提供的配置选项来实现。具体的方法是通过修改tab组件的配置项中的autoRefresh属性来达到效果。在未修改之前，autoRefresh的默认值为...

    左侧导航与tab页切换HTML示例

    2. CSS样式：定义导航栏和tab页的样式，如背景色、字体、边框等，同时设置tab页的默认隐藏和激活状态的样式。 3. JavaScript/jQuery代码：处理点击导航栏时的事件，根据点击的导航项，显示对应的tab页内容，并更新...

    IE Tab Multi (Enhance) for Chrome 1.0.0.1离线安装包

    可在Chrome内使用多标签页式的IE，同时比其它IE扩展拥有更多强大的实用功能！ IE Tab Multi 的表现与原版IE是最相近的。 你可以不用再另外打开IE访问只能在IE中访问的网站并运行ActiveX控件。 这个扩展只支持Windows...

    HTML5&SVG实现的超酷动画Tab菜单栏

    一款基于SVG和CSS3的动画Tab菜单插件，菜单图标使用SVG绘制而成，切换时还会产生不错的动画效果，还同时会渐变地更新页面的背景颜色，当然如果你觉得太花里胡哨，可以自行修改js代码取消背景颜色的渐变切换。

    底部导航栏Tab切换方法

    总结起来，实现底部导航栏Tab切换的关键在于正确设置导航栏的菜单项，处理点击事件，以及在事件响应中动态加载和切换对应的界面内容。同时，自定义过渡动画可以让用户体验更加流畅自然。通过以上步骤，你就能创建出...

Magicbox
Global site tag (gtag.js) - Google Analytics