一个不错的导航条

以下是效果:

 程序代码
<style>
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
    list-style:none;
    margin:0;
    padding:0;
    height:29px;
    background-image:url(/webdesign/UploadFiles_9870/200702/20070202082317812.gif) right top no-repeat;
}

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
    color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
    color:#F30;
    text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
    color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
    color:#F30;
    text-decoration:none;
}
div.HackBox {
  padding : 2px 2px ;
  border-left: 2px solid #6697CD;
  border-right: 2px solid #6697CD;
  border-bottom: 2px solid #6697CD;
  display:none;
}

</style>

<div id="Whatever">
    <ul class="TabBarLevel1" id="TabPage1">
        < li id="Tab1"><a href="#" >子虚乌有</a></li>
        <li  id="Tab2" class ="Selected"><a href="#" >金翅擘海</a></li>
        <li  id="Tab3"> <a href="#" ><B><font color="#22FF22">知</font>< font color="#FF2222">往</font><font color="#001199">观< /font><font color="#00fffa">来</font></B></a> </li>
        <li  id="Tab4"><a href="#" >我太低调</a></li>
    </ul>
    <div id="cnt">
    <div id="dTab1" class="HackBox">我为每一次的快乐而哭泣,我为每一次的悲伤而微笑。
    </div>
    <div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】

    </div>
    <div id="dTab3" class="HackBox">学习是件头疼的事,为了能活下去我不得不学习

    </div>
    <div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
    </div>
    </div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
        var oItem = document.getElementById(tabpage);   
    for(var i=0;i<oItem.children.length;i++){
        var x = oItem.children(i);    
        x.className = "";
        var y = x.getElementsByTagName('a');
        y[0].style.color="#333333";
    }    
    document.getElementById(tabid).className = "Selected";
    var dvs=document.getElementById("cnt").getElementsByTagName("div");
    for (var i=0;i<dvs.length;i++){
      if (dvs.id==('d'+tabid))
        dvs.style.display='block';
      else
        dvs.style.display='none';
    }
}

</script>

时间: 2025-01-24 01:25:59

一个不错的导航条的相关文章

网站顶部导航条必须要提供的内容和功能

网页制作Webjx文章简介:网页顶部导航条能解决什么问题? 顶部导航条提供给用户一种很方便,简洁分类展示方式,让用户访问品类繁多的有组织的内容,用户为了完成任务需要找到必要的内容和功能. 这个可能是最简单也最常用的组件了,所以内容也不多--. 原文地址: http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html 解决什么问题? 用户为了完成任务需要找到必要的内容和功能. 什么时候用? 2-12个分类的时候 分类的标题相对较短并

编写简单的vfp导航条

从接触FoxPro开始,我们就面对着自己编写"Navigator"(导航条),我与一些朋友都认为:数据库系统开发时,基本的数据导航.添加.删除.修改是很见程序员功力的.实际情况也是这样,无论是 Visual FoxPro 还是其他工具,如:Delphi.PB.VB,虽然都提供了各自的控件,但是实际情况总是复杂的,标准控件往往不能应付.学会编学这些控件应该是很有意义的事情. 本文中笔者将介绍用 Visual FoxPro 编写一个简单的导航条.导航条的内容就是"首记录.上一条.

BooStrap对导航条的改造实践小结_javascript技巧

制作导航(基础样式)需要如下几部: 第一步:首先在制作导航的列表(<ul class="nav nav-tabs"> 当然nav-tabs是用来控制样式的我们可以选择比如nav-pills) 第二步:在列表里面添加自己的链接 <ul class="nav nav-tabs"> <li><a href="index.html" class="active">Home</a&g

CSS3+Js实现响应式导航条_CSS/HTML

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

创建一个纯CSS的水平导航条

css|创建 按照传统的方法,导航条由放在一行表格单元里的图形图像构成.由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找(新的)方法,用结构化的XHTML标记和CSS格式来创建导航条. 一个简单的CSS导航条 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,就像例A里的一样. 这种方法看起来很合理也很直观.但问题是,把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入

FLASH制作一个可以伸缩的导航条

导航|伸缩 制作过程使用FLASH MX 中文版,效果如下: 点击这里下载源文件 由于时间比较紧:我作的比较粗糙:请大家谅解:本教程只是希望能给大家一个思路:细节方面自已有时间时再作吧:以 下是制作过程: 一.新建一个大小为:200*200Px:帧频:45:背景色:#FFFFFF:的影片: 二.首先我们来制作四个导航条:由于时间关系:我只作一个:然后复制:因为作法都一样:     步骤A:新建一影片剪辑:起名字为"zishu1":在这个剪辑中共建四个图层:从下到下名字分别为:AS.BT

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)_javascript技巧

效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

jquery入门—编写一个导航条(可伸缩)_jquery

1.编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容. 示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="

Android ActionBar 作为导航条的一个Bug

在Android兼容开发包(Support Package)的示例中,演示了ViewPager和ActionBar导航条一起使用的一个示例,该示例的代码目录位于: android-sdk-windows\extras\android\support\v13\samples\Support13Demos 目录中的 /Support13Demos/src/com/example/android/supportv13/app/ActionBarTabsPager.java Java类中. 运行界面如下