[急]如何在树形菜单中实现点击链接之后,链接变色的效果(一个很菜的问题)

newcatchrush 2003-09-04 12:03:38
一个框架分为了两部分,左边为树形菜单,右边为内容显示区,现在点击左边的菜单链接后,右边显示出相对应的版块内容,同时该链接变色,请问如何实现
该树形菜单效果的js文件如下(应该在哪里作修改?谢谢各位老鸟了,知道这个问题很菜,但是本人javascript不熟,:():
function Folder(folderDescription, hreference) //constructor
{
//constant data
this.desc = folderDescription
this.hreference = hreference
this.id = -1
this.navObj = 0
this.iconImg = 0
this.nodeImg = 0
this.isLastNode = 0

//dynamic data
this.isOpen = true
this.iconSrc = "./jsimage/ftv2folderopen.gif"
this.children = new Array
this.nChildren = 0

//methods
this.initialize = initializeFolder
this.setState = setStateFolder
this.addChild = addChild
this.createIndex = createEntryIndex
this.hide = hideFolder
this.display = display
this.renderOb = drawFolder
this.totalHeight = totalHeight
this.subEntries = folderSubEntries
this.outputLink = outputFolderLink
}

function setStateFolder(isOpen)
{
var subEntries
var totalHeight
var fIt = 0
var i=0

if (isOpen == this.isOpen)
return

if (browserVersion == 2)
{
totalHeight = 0
for (i=0; i < this.nChildren; i++)
totalHeight = totalHeight + this.children[i].navObj.clip.height
subEntries = this.subEntries()
if (this.isOpen)
totalHeight = 0 - totalHeight
for (fIt = this.id + subEntries + 1; fIt < nEntries; fIt++)
indexOfEntries[fIt].navObj.moveBy(0, totalHeight)
}
this.isOpen = isOpen
propagateChangesInState(this)
}

function propagateChangesInState(folder)
{
var i=0

if (folder.isOpen)
{
if (folder.nodeImg)
if (folder.isLastNode)
folder.nodeImg.src = "./jsimage/ftv2mlastnode.gif"
else
folder.nodeImg.src = "./jsimage/ftv2mnode.gif"
folder.iconImg.src = "./jsimage/ftv2folderopen.gif"
for (i=0; i<folder.nChildren; i++)
folder.children[i].display()
}
else
{
if (folder.nodeImg)
if (folder.isLastNode)
folder.nodeImg.src = "./jsimage/ftv2plastnode.gif"
else
folder.nodeImg.src = "./jsimage/ftv2pnode.gif"
folder.iconImg.src = "./jsimage/ftv2folderclosed.gif"
for (i=0; i<folder.nChildren; i++)
folder.children[i].hide()
}
}

function hideFolder()
{
if (browserVersion == 1) {
if (this.navObj.style.display == "none")
return
this.navObj.style.display = "none"
} else {
if (this.navObj.visibility == "hiden")
return
this.navObj.visibility = "hiden"
}

this.setState(0)
}

function initializeFolder(level, lastNode, leftSide)
{
var j=0
var i=0
var numberOfFolders
var numberOfDocs
var nc

nc = this.nChildren

this.createIndex()

var auxEv = ""

if (browserVersion > 0)
auxEv = "<a href='javascript:clickOnNode("+this.id+")'>"
else
auxEv = "<a>"

if (level>0)
if (lastNode) //the last 'brother' in the children array
{
this.renderOb(leftSide + auxEv + "<img name='nodeIcon" + this.id + "' src='./jsimage/ftv2mlastnode.gif' width=16 height=22 border=0></a>")
leftSide = leftSide + "<img src='./jsimage/ftv2blank.gif' width=16 height=22>"
this.isLastNode = 1
}
else
{
this.renderOb(leftSide + auxEv + "<img name='nodeIcon" + this.id + "' src='./jsimage/ftv2mnode.gif' width=16 height=22 border=0></a>")
leftSide = leftSide + "<img src='./jsimage/ftv2vertline.gif' width=16 height=22>"
this.isLastNode = 0
}
else
this.renderOb("")

if (nc > 0)
{
level = level + 1
for (i=0 ; i < this.nChildren; i++)
{
if (i == this.nChildren-1)
this.children[i].initialize(level, 1, leftSide)
else
this.children[i].initialize(level, 0, leftSide)
}
}
}

function drawFolder(leftSide)
{
if (browserVersion == 2) {
if (!doc.yPos)
doc.yPos=8
doc.write("<layer id='folder" + this.id + "' top=" + doc.yPos + " visibility=hiden>")
}

doc.write("<table ")
if (browserVersion == 1)
doc.write(" id='folder" + this.id + "' style='position:block;' ")
doc.write(" border=0 cellspacing=0 cellpadding=0>")
doc.write("<tr><td>")
doc.write(leftSide)
this.outputLink()
doc.write("<img name='folderIcon" + this.id + "' ")
doc.write("src='" + this.iconSrc+"' border=0></a>")
doc.write("</td><td valign=middle nowrap>")
if (USETEXTLINKS)
{
this.outputLink()
doc.write(this.desc + "</a>")
}
else
doc.write(this.desc)
doc.write("</td>")
doc.write("</table>")

if (browserVersion == 2) {
doc.write("</layer>")
}

if (browserVersion == 1) {
this.navObj = doc.all["folder"+this.id]
this.iconImg = doc.all["folderIcon"+this.id]
this.nodeImg = doc.all["nodeIcon"+this.id]
} else if (browserVersion == 2) {
this.navObj = doc.layers["folder"+this.id]
this.iconImg = this.navObj.document.images["folderIcon"+this.id]
this.nodeImg = this.navObj.document.images["nodeIcon"+this.id]
doc.yPos=doc.yPos+this.navObj.clip.height
}
}

function outputFolderLink()
{
if (this.hreference)
{
doc.write("<a href='" + this.hreference + "'")
if (browserVersion > 0)
doc.write("onClick='javascript:clickOnFolder("+this.id+")'")
doc.write(">")
}
else
doc.write("<a>")
// doc.write("<a href='javascript:clickOnFolder("+this.id+")'>")
}

function addChild(childNode)
{
this.children[this.nChildren] = childNode
this.nChildren++

return childNode
}

function folderSubEntries()
{
var i = 0
var se = this.nChildren

for (i=0; i < this.nChildren; i++){
if (this.children[i].children) //is a folder
se = se + this.children[i].subEntries()
}

return se
}


// Definition of class Item (a document or link inside a Folder)
// *************************************************************

function Item(itemDescription, itemLink) // Constructor
{
// constant data
this.desc = itemDescription
this.link = itemLink
this.id = -1 //initialized in initalize()
this.navObj = 0 //initialized in render()
this.iconImg = 0 //initialized in render()
this.iconSrc = "./jsimage/ftv2doc.gif"

// methods
this.initialize = initializeItem
this.createIndex = createEntryIndex
this.hide = hideItem
this.display = display
this.renderOb = drawItem
this.totalHeight = totalHeight
}

function hideItem()
{
if (browserVersion == 1) {
if (this.navObj.style.display == "none")
return
this.navObj.style.display = "none"
} else {
if (this.navObj.visibility == "hiden")
return
this.navObj.visibility = "hiden"
}
}
...全文
75 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
fason 2003-09-04
  • 打赏
  • 举报
回复
http://fason.nease.net/zhuanti/tree/foldertree3/dtree.htm
Brookes 2003-09-04
  • 打赏
  • 举报
回复
在<head>..</head>之间加入:
<style>
A.a03:link {text-decoration:none;color:#000000;}
A.a03:visited {text-decoration:none;color:#800080;}
A.a03:active,A.a03:hover {text-decoration:underline;color:#ff0000;}
</style>
newcatchrush 2003-09-04
  • 打赏
  • 举报
回复
// Auxiliary Functions for Folder-Treee backward compatibility
// *********************************************************

function gFld(description, hreference)
{
description="<font style=font-size:9pt; font-color: #00ff00;background-color:#ccff99>" + description
folder = new Folder(description, hreference)
return folder
}

function gLnk(target, description, linkData)
{
description="<font style=font-size:9pt; font-color: #0000ff;background-color:#ccff99>" + description
fullLink = ""

if (target==0)
{
fullLink = "'"+linkData+"' target=_top"
}
else
{
if (target==1)
fullLink = "'"+linkData+"' target=_top"
else
fullLink = "'"+linkData+"' target=\"mainFrame\""
}

linkItem = new Item(description, fullLink)
return linkItem
}

function insFld(parentFolder, childFolder)
{
return parentFolder.addChild(childFolder)
}

function insDoc(parentFolder, document)
{
parentFolder.addChild(document)
}



// Global variables
// ****************

USETEXTLINKS = 1
indexOfEntries = new Array
nEntries = 0
doc = document
browserVersion = 0
selectedFolder=0
newcatchrush 2003-09-04
  • 打赏
  • 举报
回复
// Methods common to both objects (pseudo-inheritance)
// ********************************************************

function display()
{
if (browserVersion == 1)
this.navObj.style.display = "block"
else
this.navObj.visibility = "show"
}

function createEntryIndex()
{
this.id = nEntries
indexOfEntries[nEntries] = this
nEntries++
}

// total height of subEntries open
function totalHeight() //used with browserVersion == 2
{
var h = this.navObj.clip.height
var i = 0

if (this.isOpen) //is a folder and _is_ open
for (i=0 ; i < this.nChildren; i++)
h = h + this.children[i].totalHeight()

return h
}


// Events
// *********************************************************

function clickOnFolder(folderId)
{
var clicked = indexOfEntries[folderId]

if (!clicked.isOpen)
clickOnNode(folderId)

return

if (clicked.isSelected)
return
}

function clickOnNode(folderId)
{
var clickedFolder = 0
var state = 0

clickedFolder = indexOfEntries[folderId]
state = clickedFolder.isOpen

clickedFolder.setState(!state) //open<->close
}

function initializeDocument()
{
if (doc.all)
browserVersion = 1 //IE4
else
if (doc.layers)
browserVersion = 2 //NS4
else
browserVersion = 0 //other

foldersTree.initialize(0, 1, "")
foldersTree.display()

if (browserVersion > 0)
{
doc.write("<layer top="+indexOfEntries[nEntries-1].navObj.top+"> </layer>")

// close the whole tree
clickOnNode(0)
// open the root folder
clickOnNode(0)
}
}
newcatchrush 2003-09-04
  • 打赏
  • 举报
回复
function initializeItem(level, lastNode, leftSide)
{
this.createIndex()

if (level>0)
if (lastNode) //the last 'brother' in the children array
{
this.renderOb(leftSide + "<img src='./jsimage/ftv2lastnode.gif' width=16 height=22>")
leftSide = leftSide + "<img src='./jsimage/ftv2blank.gif' width=16 height=22>"
}
else
{
this.renderOb(leftSide + "<img src='./jsimage/ftv2node.gif' width=16 height=22>")
leftSide = leftSide + "<img src='./jsimage/ftv2vertline.gif' width=16 height=22>"
}
else
this.renderOb("")
}

function drawItem(leftSide)
{
if (browserVersion == 2)
doc.write("<layer id='item" + this.id + "' top=" + doc.yPos + " visibility=hiden>")

doc.write("<table ")
if (browserVersion == 1)
doc.write(" id='item" + this.id + "' style='position:block;' ")
doc.write(" border=0 cellspacing=0 cellpadding=0>")
doc.write("<tr><td>")
doc.write(leftSide)
doc.write("<a href=" + this.link + ">")
doc.write("<img id='itemIcon"+this.id+"' ")
doc.write("src='"+this.iconSrc+"' border=0>")
doc.write("</a>")
doc.write("</td><td valign=middle nowrap>")
if (USETEXTLINKS)
doc.write("<a href=" + this.link + ">" + this.desc + "</a>")
else
doc.write(this.desc)
doc.write("</table>")

if (browserVersion == 2)
doc.write("</layer>")

if (browserVersion == 1) {
this.navObj = doc.all["item"+this.id]
this.iconImg = doc.all["itemIcon"+this.id]
} else if (browserVersion == 2) {
this.navObj = doc.layers["item"+this.id]
this.iconImg = this.navObj.document.images["itemIcon"+this.id]
doc.yPos=doc.yPos+this.navObj.clip.height
}
}
newcatchrush 2003-09-04
  • 打赏
  • 举报
回复
谢谢楼上两位的答复,各50分.
^-^

87,987

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧