站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → 斜体样式的导航条

斜体样式的导航条

摘要: 斜体样式的导航条
<tr> <td>

<textarea class=fm id=code style="WIDTH: 510px; HEIGHT: 172px" rows=12 cols=81> html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> 无标题文档 <link> href="http://www.happyshow.org/sample/20060615/css/main.css" rel="stylesheet" type="text/css"> <link> href="http://www.happyshow.org/sample/20060615/css/class.css" rel="stylesheet" type="text/css"> <script src="http://www.happyshow.org/sample/20060615/nav.js" type="text/javascript"></script> <script type="text/javascript"> var selectindex = 0; //预设项目 var subclass = new Array() subclass[0] = "

  1. ·电影
  2. ·餐厅
  3. ·演出
"; subclass[1] = "
  1. ·项链
  2. ·戒指
  3. ·耳环
" subclass[2] = "
  1. ·吃饭
  2. ·旅游
" subclass[3] = "
  1. ·万年历
  2. ·我的生日
  3. ·她的生日
" subclass[4] = "
  1. ·金牛座
  2. ·射手座
  3. ·蝎子座
  4. ·水瓶座
" </script> </head> <body onload="preset()">
我的博客：
http://www.happyshow.org



导航条的三种状态：

style0
style1
style2
</body> </textarea>

<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

已经封装成 js 文件的代码：

// JavaScript Document

function preset()
{
document.getElementById("itemlist").childNodes[selectindex].firstChild.firstChild.className="style1";
document.getElementById("itemlist").childNodes[selectindex+1].childNodes[0].childNodes[0].className="style2";
innersubclass();
}
function focusthis(obj)
{
clearselect();
obj.className = "style1";
obj.parentNode.parentNode.nextSibling.firstChild.firstChild.
className="style2";
innersubclass(obj);
}
function innersubclass(obj)
{
if (obj==null)
{
document.getElementById("subclass").innerHTML = subclass[selectindex];
}else
{
for(i=0; i {
if(obj == document.getElementById("itemlist").childNodes[i].firstChild.firstChild)
{
document.getElementById("subclass").innerHTML = subclass[i];
}
}
}
}
function recover()
{
clearselect();
preset();
innersubclass();
}
function clearselect()
{
for (i=0; i {
document.getElementById("itemlist").childNodes[i].firstChild.firstChild.className="style0";
}
}

在代码编写过程中，发现 Firefox 对 DOM 解释和 IE 对 DOM 的解释差别较大。虽然上面的代码也兼容ff，但实现的方法不太标准，近期需要补习一下 FF 下的DOM。

目前此效果仅能应用于网站导航条，如果要做成斜体的选项卡效果，还需要调整一下代码，但估计不用重写了，呵呵

</td> </tr> </table>
↑返回目录
前一篇: 用javascript实现Base64编码
后一篇: 用javascript实现（页面正在加载的效果）