Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 2013/12/31 6:41:10
斜体样式的导航条_JavaScript技术_编程技术

斜体样式的导航条_JavaScript技术_编程技术-你的首页-uuhomepage.com








[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。




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











If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759