互联网观察 网站建设 网站运营 网络创业 电子商务 建站软件 建站软件教程 网站开发 网页制作 收藏本站
建站常识 | 域名 | 主机 | 网上开店 | 搜索引擎优化 | 网站推广 | 网络赚钱 | 站长经验 | 个人建站 | 网站设计 | 网页特效 | wap网站

斜体样式的导航条

    [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<obj.parentNode.parentNode.parentNode.childNodes.length;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.length; i++)
  {
   document.getElementById("itemlist").childNodes[i].firstChild.firstChild.className="style0";
  } 
 }

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

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





上一篇:用javascript实现(页面正在加载的效果)
下一篇:用javascript实现Base64编码
相关分类
网页制作 (4121)
  html教程 (591)
  css教程 (546)
  Dreamweaver教程 (1006)
  JavaScript教程 (834)
  网页制作技巧 (378)
  网页特效 (766)
 




   版权所有 Copyright© 2006 黑马建站宝典 联系方式:heima123#gmail.com