【科普】如何在网页中把鼠标点中的列表项加粗

开发 2008-11-1 4:39:00

在这个夜深人静的时刻，深情的写一篇科普文章。

好吧，不要问我科普文章是什么，也不要问我为什么要写科普文章，也不要问我为什么很久没有写科普文章。

好吧，不然我破例回答一次这些非常有意义的问题好了。

一、科普文章，就是科普文章；
二、写科普文章，是因为我喜欢讲道理；
三、很久没有些科普文章，是因为我又不喜欢讲道理了。

-------- 嗯嗯 --------

以下开始讲解。

再次强调科普文章的题目是“如何在网页中把鼠标点中的列表项加粗”。
今天有个X盲问我可不可以用CSS解决这个问题，有点哭笑不得。正确的解释应该是：需要CSS的配合，但关键还是要通过javascript脚本付诸实现——因为CSS本身不会记录元素状态，只会实时根据元素状态表现出不同的样式。

以下是一个简单的例子，也是解决上述问题的方法之一：

<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>List Demo</title> <style type="text/css"> ul,li {margin: 0; padding: 0; list-style: none;} #list li {background: #ccc;} #list li.current {background: #333; color: white; font-weight: bold;} </style> <script type="text/javascript"> function initList() { var root = document.getElementById('list'); root['current'] = root.getElementsByTagName('li')[0]; if (root['current']) { root.current.className = 'current'; root.onclick = changeListItem; } } function changeListItem(evt) { evt = evt || window.event; var target = evt.target || evt.srcElement; if (target.tagName.toLowerCase() != 'li') return; var root = document.getElementById('list'); if (root['current'] == target) return; if (root['current']) root['current'].className = ''; root['current'] = target; root['current'].className = 'current'; } </script> </head> <body onload_fckprotectedatt="%20onload%3D%22initList()%22"> <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

代码写完了，困了，去睡觉了。

标签集:TAGS:科普

回复Comments() 点击Count()

回复Comments

{commentauthor}

{commenttime}

{commentnum}

{commentcontent}

作者:

{commentrecontent}