html选项卡式导航_选项卡式导航：动态添加CSS类
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"
"/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">
js导航栏下拉菜单<!-- Date: 2011-07-07 -->
</head>
步骤2：HTML <body>
这是计划：
容器，标题和内容是div层。 该容器包含所有内容，其功能是防⽌内容缩⼩到800px以上。 标头是制表符系统，内容不⾔⽽喻。 标签系统
由⽆序列表组成，我们将它们⽔平对齐。 每个列表项都包含指向另⼀个页⾯的链接。 考虑到这⼀点，提出标记并不难：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"/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="b            </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 ElementById("contentloadtag")
if (adyState=="complete"){
ran=1
init()
}
}
}
setTimeout("if (!ran) init()", 0)
}
加载内容时，此代码运⾏init函数（尚不存在）。 如果您仅使⽤load，则javascript将在所有外部⽂件（例如图像，样式表）加载后执⾏。 这将导致⼀个裸露的⽹站⼏秒钟，⽽没有javascript的封⾯。 是的，您的房东将禁⽌您发布成⼈内容...
步骤6：JavaScript init（）
让我们创建该init函数。 此功能检测您当前正在查看的选项卡，删除其超链接（访问者已在其中）并分配⼀个类。
function init() {
el = function(q) {ElementById(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) {ElementById(q)};
这是很长的ElementById的简写。 这次没有⽤，因为我只使⽤了⼀次。 但是使⽤它是⼀个好习惯。
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，这是⼀个后备。 将其拖放到站点的公共根⽂件夹中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。