微赢网络技术论坛 › 门户 ›设计在线› 网页设计 › 查看内容

斜体样式的导航条

2009-12-16 23:33| 发布者: admin| 查看: 57| 评论: 0|原作者: 云忆

无标题文档

约会安排

礼物安排

话题安排

日历

测试星座

我的博客：

http://www.happyshow.org

导航条的三种状态：

style0

style1

style2

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

收藏分享邀请

		自动登录	找回密码
密码			注册

斜体样式的导航条

style0

style1

style2

最新评论

相关分类