JS+DIV实现标签页
2008-10-29 16:38
288 查看
效果图:http://www.happyshow.org/sample/20061108/tags.html
源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签示例</title>
<style type="text/css">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;}
.tagContent { background:url(images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
</style>
</head>
<body>
<h1>标签示例</h1>
<ol>
<li>使用 JS+DIV 实现</li>
<li>标签宽度随文字的数量自适应</li>
<li>支持 IE、Firefox</li>
<li><a href="http://www.happyshow.org/article.asp?id=131" target="_blank">查看此示例的详细</a></li>
<li><a href="http://www.happyshow.org/article.asp?id=87" target="_blank">查看旧版本</a></li>
<li><strong>更新时间:2006-11-08</strong></li>
</ol>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="selectTag('tagContent0',this)">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="selectTag('tagContent1',this)">标签二</a></li>
<li><a href="javascript:void(0)" onclick="selectTag('tagContent2',this)">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<div id="tagContent0" class="tagContent">第一个标签的内容</div>
<div id="tagContent1" class="tagContent selectTag">第二个标签的内容<p>标签背景图1:<img src="images/tagleft.gif" align="top"><br>标签背景图2:<img src="images/tagright.gif" align="top"><br>内容渐变背景图(1象素宽):<img src="images/bg.gif" align="top"></p></div>
<div id="tagContent2" class="tagContent">第三个标签的内容<p>放大观看标签背景图:<img src="images/tagleft.gif" align="top" width="300" height="100"></p></div>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>
所需图片:
源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签示例</title>
<style type="text/css">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;}
.tagContent { background:url(images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
</style>
</head>
<body>
<h1>标签示例</h1>
<ol>
<li>使用 JS+DIV 实现</li>
<li>标签宽度随文字的数量自适应</li>
<li>支持 IE、Firefox</li>
<li><a href="http://www.happyshow.org/article.asp?id=131" target="_blank">查看此示例的详细</a></li>
<li><a href="http://www.happyshow.org/article.asp?id=87" target="_blank">查看旧版本</a></li>
<li><strong>更新时间:2006-11-08</strong></li>
</ol>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="selectTag('tagContent0',this)">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="selectTag('tagContent1',this)">标签二</a></li>
<li><a href="javascript:void(0)" onclick="selectTag('tagContent2',this)">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<div id="tagContent0" class="tagContent">第一个标签的内容</div>
<div id="tagContent1" class="tagContent selectTag">第二个标签的内容<p>标签背景图1:<img src="images/tagleft.gif" align="top"><br>标签背景图2:<img src="images/tagright.gif" align="top"><br>内容渐变背景图(1象素宽):<img src="images/bg.gif" align="top"></p></div>
<div id="tagContent2" class="tagContent">第三个标签的内容<p>放大观看标签背景图:<img src="images/tagleft.gif" align="top" width="300" height="100"></p></div>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>
所需图片:
相关文章推荐
- js实现的修改div里img标签的src属性
- JS+DIV实现标签页
- JS实现标签页效果(配合css)不同标签下对应不同div
- div+css+js实现竖向排列的标签选项卡
- JS+DIV+CSS实现的经典标签切换效果代码
- JS获取div滚动条距离实现弹出标签位置动态移动
- js实现td内的div标签适应自身高度和宽度
- js实现的修改div里img标签的src属性
- JS实现当前编辑行自动滚动至div显示区域
- js实现div内容局部变色的两种方法
- Jquery和JS获取ul中li标签的实现方法
- jS实现兼容的div拖放功能
- 拜师的第一课 js实现div拖动功能
- JS+DIV+CSS实现仿表单下拉列表效果
- JS闭包实现给DIV添加事件 显示二级菜单例子
- 原生js实现倒计时功能,创建元素div插入元素,时间结束替换倒计时功能,移除元素
- 用js实现div的淡入淡出
- js实现一个可以兼容PC端和移动端的div拖动效果
- rtags——node.js+redis实现的标签管理模块
- js+html+css实现鼠标移动div实例