【原创】dl+ol应用原创文章 & 讨论汇总版无忧脚本

aoao 发表于 2006-1-24 21:32:18

【原创】dl+ol应用

题目：dl+ol的练习
作者：嗷嗷

上次 li 把 dl 模拟了~dl不知道要干什么了:green:~找了ol一起来做复合列表~:lol:

这个练习除了css外~外加用了点JS :shifty:
先看下难看的演示  因为最近太懒~没做漂亮的样式 :shifty:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习dl中</title>
<style type="text/css">
dl *
{
margin: 0;
padding: 0;
font-size:12px;
}
dl
{
width: 405px;
height:128px;
border:1px #000 solid;
}

dt
{
width:120px;
height: 32px;
line-height: 32px;
text-align: center;
}
dt a
{
display: block;
text-decoration: none;
}
dt.ing a
{
background:#efefef;
}
dd
{
position: absolute;
display: none;
width:280px;
background-color: #fff;

}
dd li
{
line-height: 16px;
list-style-type: none;
text-align:right;
color:#999;
}
dd li a
{
float:left;
display:inline;
padding-left:5px;
}
dd.ing
{
display: block;
}
dd.no
{
display:none;
}
dd#d1
{
margin-top:-32px;
margin-left:120px;
}
dd#d2
{
margin-top:-64px;
margin-left:120px;
}
dd#d3
{
margin-top:-96px;
margin-left:120px;

}
dd#d4
{
margin-top:-128px;
margin-left:120px;
}
</style>
<script type="text/javascript">
var ddiShow=2;
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";
var iShow;
ddiShow=iShow;
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";
return false;
}
</script>
</head>

<body>
<dl>
<dt id="t1"><a href="#" onmouseover="return show('1');">测试菜单一</a></dt>
<dd id="d1">
<ol>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
</ol>

</dd>
<dt id="t2"  class="ing"><a href="#"  onmouseover="return show('2');">测试菜单二</a></dt>
<dd id="d2" class="ing">
<ol>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li> </ol>
</dd>
<dt id="t3"><a href="#"  onmouseover="return show('3');">测试菜单三</a></dt>
<dd id="d3">
<ol>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li> </ol>
</dd>
<dt id="t4"><a href="#"  onmouseover="return show('4');">测试菜单四</a></dt>
<dd id="d4">
<ol>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li> </ol>
</dd>
</dl>

</body>

</html>

CSS的重点

dt.ing a
{
background:#efefef;/*移上去的背景*/
}
dd
{
position: absolute;/*把DD流出来*/
display: none;/*把DD默认隐藏起来*/
width:280px;
background-color: #fff;
}
dd.ing
{
display: block;/*移上去的显示*/
}
dd.no
{
display:none;
}
dd#d1
{
margin-top:-32px;
margin-left:120px;/*把dd移到合适的地方 #d2#d3#d4也一样*/
}

JS部分

<script type="text/javascript">
var ddiShow=2;//定义一个变量来记录选中的因为dl dd都要~为了省个变量所以..用数字
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";//改掉原来的样式~隐藏起来
var iShow;
ddiShow=iShow;//把选中的的值给ddiShow 留下次用
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";//改样式显示出来~~
return false;
}
</script>

改个事件试一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习dl中</title>
<style type="text/css">
dl *
{
margin: 0;
padding: 0;
font-size:12px;
}
dl
{
width: 405px;
height:128px;
border:1px #000 solid;
}

dt
{
width:120px;
height: 32px;
line-height: 32px;
text-align: center;
}
dt a
{
display: block;
text-decoration: none;
}
dt.ing a
{
background:#efefef;
}
dd
{
position: absolute;
display: none;
width:280px;
background-color: #fff;

}
dd li
{
line-height: 16px;
list-style-type: none;
text-align:right;
color:#999;
}
dd li a
{
float:left;
display:inline;
padding-left:5px;
}
dd.ing
{
display: block;
}
dd.no
{
display:none;
}
dd#d1
{
margin-top:-32px;
margin-left:120px;
}
dd#d2
{
margin-top:-64px;
margin-left:120px;
}
dd#d3
{
margin-top:-96px;
margin-left:120px;

}
dd#d4
{
margin-top:-128px;
margin-left:120px;
}
</style>
<script type="text/javascript">
var ddiShow=2;
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";
var iShow;
ddiShow=iShow;
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";
return false;
}
</script>
</head>

<body>
<dl id="test">
<dt id="t1"><a href="#" onclick="return show('1');">测试菜单一</a></dt>
<dd id="d1">
<ol>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li> </ol>

</dd>
<dt id="t2" class="ing"><a href="#" onclick="return show('2');">测试菜单二</a></dt>
<dd id="d2" class="ing">
<ol>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li> </ol>

</dd>
<dt id="t3"><a href="#" onclick="return show('3');">测试菜单三</a></dt>
<dd id="d3">
<ol>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li> </ol>

</dd>
<dt id="t4"><a href="#" onclick="return show('4');">测试菜单四</a></dt>
<dd id="d4">
<ol>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li> </ol>

</dd>
</dl>

</body>

</html>

[ 本帖由 eoe 最后编辑于 2006-1-24 21:48 ]

windowspp 发表于 2006-1-30 16:06:01

不错啊。我顶你

ansonvili 发表于 2006-2-6 10:52:21

支持

alixroo 发表于 2006-2-21 15:04:44

dl *
是什么意思呢?

inwing 发表于 2006-9-29 23:53:49

正式我想要的...

aminic 发表于 2006-10-4 20:11:15

AOAO经过刻苦练习现在也是高手嘛!!

cxqlnf 发表于 2006-10-27 10:59:49

好东西，收藏！

bluekein 发表于 2006-11-2 14:02:06

好东西，收藏了

xiaoyunet 发表于 2008-6-11 21:53:54

如何让他按顺序自动切换呢呢?

prolove 发表于 2009-2-20 23:16:21

回复 #9 xiaoyunet 的帖子

http://bbs.51js.com/viewthread.php?tid=82787

浴火凤凰 发表于 2009-4-21 14:42:05

学习了！！！

今天又长了知识了！！！
向楼主学习！！！
顺便提一句：
在JS代码中 var iShow;这一句有什么特殊作用吗？
在我看来好像没有什么用处。

页: [1]

无忧脚本's Archiver