html选项卡式导航_选项卡式导航：动态添加CSS类

最新推荐文章于 2024-06-02 16:43:03 发布

daique1908

最新推荐文章于 2024-06-02 16:43:03 发布

阅读量1.5k

点赞数

文章标签：列表定位 html css html5

html选项卡式导航

我喜欢制表符，只要它们存在，我就做了他们！让我们看看是否可以利用一些javascript和CSS3功能构建出色的选项卡式导航。我们将使用javascript自动检测访问者当前所在的标签，甚至使其与IE6兼容。 CSS3pie万岁！

步骤1：HTML <head>

容易的部分

因为我们希望页面与IE 6-8兼容，所以我们使用“ HTML-4.01 Transitional”文档类型。让我们看一下模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>testfile</title>
		<meta name="tutor" content="Bob de Ruiter">
		<meta name="author" content="Your Name">
		<!-- Date: 2011-07-07 -->
	</head>
	<body>
	</body>
</html>

死链接总比没有链接好！

您的Web编辑器应具有此模板，否则请将其复制到主文件夹中的index.php。

我们有三个外部文件，稍后将创建或添加。就像我曾祖父经常说的：死掉的链接总比没有链接要好。 pie.htc将通过css文件进行链接，因此我们只需要链接javascript和css文件即可。

<head>
		<link href="tabs.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="tabs.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>testfile</title>
		<meta name="tutor" content="Bob de Ruiter">
		<meta name="author" content="Your Name">
		<!-- Date: 2011-07-07 -->
	</head>

步骤2：HTML <body>

这是计划：

容器，标题和内容是div层。该容器包含所有内容，其功能是防止内容缩小到800px以上。标头是制表符系统，内容不言而喻。标签系统由无序列表组成，我们将它们水平对齐。每个列表项都包含指向另一个页面的链接。考虑到这一点，提出标记并不难：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
    <head>
        <link href="tabs.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="tabs.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>testfile</title>
        <meta name="tutor" content="Bob de Ruiter">
        <meta name="author" content="Your Name">
        <!-- Date: 2011-07-07 -->
    </head>
    <body>
        <div id="container">
            <div id="header">
                <ul><li><a rel="external" href="index.php">DSNR Home</a></li><li><a rel="external" href="protect.php">Protection</a></li><li><a rel="external" href="brain.php">Brainz!</a></li></ul>
            </div>
            <div id="content">
                content
            </div>
        </div>
    </body>
</html>

到目前为止，这是我们所拥有的：

小提琴。

它具有所有功能，但是客户永远不会对如此简单的设计感到满意。对你来说是个好消息

步骤3：仅CSS CSS2

因此，我们需要一些基本的样式。创建tabs.css并将其放置在与index.php相同的文件夹中

我们从造型主体和容器开始：

body {
	margin: 12px -12px;
	background-color: #003;
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 16px;
	width:100%;
}
#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

除了空白，这两个元素都没有什么特别的。容器很容易：如果将元素（具有定义的宽度）的margin-left和margin-right设置为auto，则每个浏览器都将尝试将该元素居中。

身体的负水平边距也不是那么难。容器的宽度为800像素，以便与旧屏幕兼容，但我们将向它们添加圆角，每个圆角的半径为12像素。这会使拐角缩小，因此我们向容器添加了12px的填充。

步骤4：到目前为止的结果

检查到目前为止您已经建立了什么。如果屏幕太小（低于800像素），您会注意到左侧的圆形边框消失了。它们是不必要的，因此我们的负利润使它们很好地隐藏在视线之外。

为了使内容可读，我们还应该更改内容和选项卡的背景颜色。

#header ul {
	background-color: #566AAA;
}
#content {
	background-color: #FFF;
}

第5步：JavaScript做好准备

在继续设置标签样式之前，我们要添加其中最重要的部分（也是很棒的，尽管我自己说了）：所选标签应该为白色。我们不会更改每个页面上的标签。我们让javascript做一些肮脏的工作。

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){ran=1; init()}, false)
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      ran=1
      init()
    }
  }
}

window.onload=function(){
  setTimeout("if (!ran) init()", 0)
}

加载内容时，此代码运行init函数（尚不存在）。如果您仅使用window.onload，则javascript将在所有外部文件（例如图像，样式表）加载后执行。这将导致一个裸露的网站几秒钟，而没有javascript的封面。是的，您的房东将禁止您发布成人内容...

步骤6：JavaScript init（）

让我们创建该init函数。此功能检测您当前正在查看的选项卡，删除其超链接（访问者已在其中）并分配一个类。

function init() {
	el = function(q) {return document.getElementById(q)};
	anchors = el("header").getElementsByTagName("a")
	for (a=0;a<anchors.length;a++) {
		if (anchors[a].href == window.location.href || anchors[a].href == window.location.href+"index.php") {
			anchors[a].removeAttribute("href")
			anchors[a].parentNode.className = "selected"
			break;
		}
	}
}

步骤7：JavaScript init（）分解

请允许我为您分解。

el = function(q) {return document.getElementById(q)};

这是很长的document.getElementById的简写。这次没有用，因为我只使用了一次。但是使用它是一个好习惯。

anchors = el("header").getElementsByTagName("a")
for (a=0;a<anchors.length;a++) {

这将开始循环遍历标题中的所有锚标记。

if (anchors[a].href == window.location.href || anchors[a].href == window.location.href+"index.php") {

这是最重要的部分。锚点的href属性返回绝对路径。如果href属性与访问者所在的当前页面相同，则为当前标签。但是，如果访问者位于home 文件夹中 ，则实际上他位于主页上。

anchors[a].removeAttribute("href")
anchors[a].parentNode.className = "selected"

该锚不再需要href属性。父节点是列表项。我们为该项目分配了selected类别，该类别尚不存在。记住我曾祖父说过的话。

break;

如果脚本找到了当前选项卡，它将停止搜索。

这就是我们拥有的：

小提琴

如您所见，第一个链接已更改为普通文本。

步骤8：CSS标头和内容

好，我们做了无聊的部分。我将最终样式分为两部分：定位和着色。

我们需要将标头居中并将其宽度设置为600px。我们可以使用与容器相同的技巧。内容层与容器一样大（巧合？），因此无需将其居中。

#header {
	width: 600px;
	margin: 0 auto;
}
#content {
	background-color: #FFF;
	padding: 12px;
}
#header ul {
	background-color: #566AAA;
	margin:0;
}

如果您不相信我们正在取得进展：

小提琴

步骤9：CSS标签列表

抱歉，您必须等待很长时间才能完成此部分，但我们已进行了必要的准备，我们已准备就绪。

凸耳应水平对齐并具有相同的宽度。定位标记应覆盖整个标签。

#header ul {
	background-color: #566AAA;
	margin: 0;
	width:600px;
	padding: 0;
	list-style-type: none;
	overflow: visible;
}
#header ul li {
	margin:0;
	padding:0;
	display: inline-block;
	width: 33.3%; /*customize this!!!*/
	text-align: center;
	zoom: 1;
	*display: inline;
}
#header ul li a {
	width: 100%;
	height: 100%;
	display: block;
	padding: 12px 0;
}

如果选项卡少于或少于3个，请确保不要忘记更改列表项的宽度！

默认情况下，列表项的显示设置为“ list-item”，这与“ block”非常相似，除了标记之外。块元素的行为类似于段落和div；他们试图保持一致。定位标记和大多数标记标记（ strong, em ）是内联元素。它们不会强制换行，但我们无法指定其宽度。

但是还有第三种显示类型：内联块。内联块允许您更改宽度，但不会强制换行。默认情况下，span元素显示为嵌入式块。

这正是我们想要的。但是有一个缺点。 IE 6不支持嵌入式块。 zoom: 1; 和*display: inline; 照顾那个。仅IE 6和更低版本的读取规则以星号开头。

ul和list项没有填充和边距。我们的“首页”标签在左侧完美对齐，最后一个标签在右侧完美对齐。

看起来更像...

小提琴

步骤10：CSS花式的东西

我们做了一个干净的设计。它的罚款，但泽dezign zjould有impacte像一个意大利客户曾经说过，。我自己也不能说更好。

首先，您必须从这里获取pie.htc。 IE 6、7和8不支持CSS 3，这是一个后备。将其拖放到站点的公共根文件夹中。

第11步：CSS渐变很棒

无需样式化每个列表项，我们给整个列表一个大的渐变，然后将选定的列表改回白色。每种浏览器类型都有不同的渐变前缀，CSS3pie需要使用-pie-前缀。

#header ul {
	margin: 0;
	width:600px;
	padding: 0;
	list-style-type: none;
	overflow: visible;
	background-color: #566AAA;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FB6CD), to(#003F87));
	background: -moz-linear-gradient(#9FB6CD, #003F87);
	background: linear-gradient(#9FB6CD, #003F87);
	-pie-background: linear-gradient(#9FB6CD, #003F87);
	behavior: url(/PIE.htc);
}
.selected {
	background-color: #FFF;
}

background-color可以保留。对于既不支持CSS 3也不支持pie.htc的浏览器来说，这是一个后备。

第12步：CSS解决这些问题！

需要四舍五入三个元素：整个导航栏，选定的选项卡和内容。同样，每种浏览器类型都需要一个前缀，但是这次饼图不是。

#content {
	background-color: #FFF;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	padding: 12px;
	behavior: url(/PIE.htc);
}
(...)
#header ul {
	-moz-border-radius: 12px 12px 0 0;
	-webkit-border-radius: 12px;
	border-radius: 12px 12px 0 0;
	margin: 0;
	width:600px;
	padding: 0;
	background-color: #566AAA;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FB6CD), to(#003F87));
	background: -moz-linear-gradient(#9FB6CD, #003F87);
	background: linear-gradient(#9FB6CD, #003F87);
	-pie-background: linear-gradient(#9FB6CD, #003F87);
	list-style-type: none;
	behavior: url(/PIE.htc);
	overflow: visible;
}
(...)
.selected {
	behavior: url(/PIE.htc);
	box-shadow: 0 -3px 3px -1px #222;
	-moz-border-radius: 12px 12px 0 0;
	-webkit-border-radius: 12px;
	border-radius: 12px 12px 0 0;
	background-color: #FFF;
}

我们快完成了...

另一个小提琴...

步骤13：黑暗主题

首先，我们将文本的颜色更改为深蓝色，删除下划线并以早期脱发的方式对其进行惩罚：

#header ul li a {
	text-decoration: none;
	color: #005;
	font-weight: bold;
	width: 100%;
	height: 100%;
	display: block;
	padding: 12px 0;
}

你猜对了，小提琴

颜色差异很大，但是文本不会弹出。抚摸文字将是解决方案。 Safari和Chrome支持笔划，但其他浏览器则不支持。但是，所有现代浏览器+ CSS3pie都支持文本阴影。

#header ul li a {
	text-decoration: none;
	color: #005;
	font-weight: bold;
	width: 100%;
	height: 100%;
	display: block;
	padding: 12px 0;
	text-shadow: 0 1px 1px #AAA;
	behavior: url(/PIE.htc);
}

我♥影子

步骤14：内容文件

index.php

<!-- start header.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
    <head>
        <link href="tabs.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="tabs.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>testfile</title>
        <meta name="tutor" content="Bob de Ruiter">
        <meta name="author" content="Your Name">
        <!-- Date: 2011-07-07 -->
    </head>
    <body>
        <div id="container">
            <div id="header">
                <ul><li><a rel="external" href="index.php">DSNR Home</a></li><li><a rel="external" href="protect.php">Protection</a></li><li><a rel="external" href="brain.php">Brainz!</a></li></ul>
            </div>
            <div id="content">
            	<!-- end header.html, start index.php, protection.php and brain.php -->
                content
                <!-- end content files, start footer.php -->
            </div>
        </div>
    </body>
</html>
<!-- end footer.php -->

tabs.css

body {
	margin: 12px -12px;
	background-color: #003;
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 16px;
	width:100%;
}
#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#header {
	width: 600px;
	margin: 0 auto;
	/*background-color: #FFF;*/
}
#content {
	background-color: #FFF;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	padding: 12px;
	behavior: url(/PIE.htc);
}
#header ul {
	-moz-border-radius: 12px 12px 0 0;
	-webkit-border-radius: 12px;
	border-radius: 12px 12px 0 0;
	margin: 0;
	width:600px;
	padding: 0;
	background-color: #566AAA;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FB6CD), to(#003F87));
	background: -moz-linear-gradient(#9FB6CD, #003F87);
	background: linear-gradient(#9FB6CD, #003F87);
	-pie-background: linear-gradient(#9FB6CD, #003F87);
	list-style-type: none;
	behavior: url(/PIE.htc);
	overflow: visible;
}
#header ul li {
	margin:0;
	padding:0;
	display: inline-block;
	width: 33.3%; /*customize this!!!*/
	text-align: center;
	zoom: 1;
	*display: inline;
}
#header ul li a {
	text-decoration: none;
	color: #005;
	font-weight: bold;
	width: 100%;
	height: 100%;
	display: block;
	padding: 12px 0;
	text-shadow: 0 1px 1px #AAA;
	behavior: url(/PIE.htc);
}
.selected {
	behavior: url(/PIE.htc);
	box-shadow: 0 -3px 3px -1px #222;
	-moz-border-radius: 12px 12px 0 0;
	-webkit-border-radius: 12px;
	border-radius: 12px 12px 0 0;
	background-color: #FFF;
}

tabs.js

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){ran=1; init()}, false)
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      ran=1
      init()
    }
  }
}

window.onload=function(){
  setTimeout("if (!ran) init()", 0)
}

function init() {
	el = function(q) {return document.getElementById(q)};
	anchors = el("header").getElementsByTagName("a")
	for (a=0;a<anchors.length;a++) {
		if (anchors[a].href == window.location.href || anchors[a].href == window.location.href+"index.php") {
			anchors[a].removeAttribute("href")
			anchors[a].parentNode.className = "selected"
			break;
		}
	}
}

结论

首先，最后的小提琴。

翻译自: https://webdesign.tutsplus.com/tutorials/tabbed-navigation-adding-css-classes-dynamically--webdesign-3558

html选项卡式导航

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html选项卡式导航_选项卡式导航：动态添加CSS类

我爱制表符，只要它们存在我就做了！让我们看看是否可以利用一些javascript和CSS3功能来构建出色的选项卡式导航。我们将使用javascript自动检测访问者当前所在的标签，甚至使其与IE6兼容。 CSS3pie万岁！步骤1：HTML <head> 容易的部分因为我们希望页面与IE 6-8兼容，所以我们使用“ HTML-4.01 Transitiona...
复制链接

扫一扫