点就展开的范例

来源：互联网发布：澳门网络真人赌博官网编辑：程序博客网时间：2024/04/29 05:44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>div -页面布局页例(模仿IBM)</title>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
border:1px solid #000000;
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

var persistmenu="yes" //"yes" or "no". Make sure each SPAN contentcontains an incrementing ID starting at 1 (id="sub1", id="sub2",etc)
var persisttype="sitewide" //enter "sitewide" for menu to persistacross site, "local" for this page only

if (document.getElementByIdx){ //DynamicDrive.com change
document.write('<styletype="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
   if(document.getElementByIdx){
   var el =document.getElementByIdx(obj);
   var ar =document.getElementByIdx("masterdiv").getElementsByTagName_r("span");//DynamicDrive.com change
      if(el.style.display != "block"){//DynamicDrive.com change
         for (var i=0; i<ar.length;i++){
            if (ar[i].className=="submenu")//DynamicDrive.com change
            ar[i].style.display = "none";
         }
         el.style.display = "block";
      }else{
         el.style.display = "none";
      }
   }
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" :window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementByIdx(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementByIdx("sub"+inc)){
if(document.getElementByIdx("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" :window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" :blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementByIdx)
window.onload=onloadfunction

if (persistmenu=="yes" &&document.getElementByIdx)
window.onunload=savemenustate

</script>

</head>
<body>


<div id="masterdiv">

   <div class="menutitle"onclick="SwitchMenu('sub1')">SiteMenu</div>
   <span class="submenu"id="sub1">
      - <ahref="new.htm">What'sNew</a><br>
      - <ahref="hot.htm">What'shot</a><br>
      - <ahref="revised.htm">RevisedScripts</a><br>
      - <ahref="morezone/">MoreZone</a>
   </span>

   <div class="menutitle"onclick="SwitchMenu('sub2')">FAQ/Help</div>
   <span class="submenu"id="sub2">
      - <ahref="notice.htm">UsageTerms</a><br>
      - <ahref="faqs.htm">DHTMLFAQs</a><br>
      - <ahref="help.htm">ScriptsFAQs</a>
   </span>

   <div class="menutitle"onclick="SwitchMenu('sub3')">HelpForum</div>
   <span class="submenu"id="sub3">
      - <ahref="http://www.codingforums.com">CodingForums</a><br>
   </span>

   <div class="menutitle"onclick="SwitchMenu('sub4')">CoolLinks</div>
   <span class="submenu"id="sub4">
      - <ahref="http://www.javascriptkit.com">JavaScriptKit</a><br>
      - <ahref="http://www.freewarejava.com">Freewarejava</a><br>
      - <ahref="http://www.cooltext.com">CoolText</a><br>
      - <ahref="http://www.google.com">Google.com</a>
   </span>

   <img src="about.gif"onclick="SwitchMenu('sub5')"><br>
   <span class="submenu"id="sub5">
      - <ahref="http://www.dynamicdrive.com/link.htm">Link toDD</a><br>
      - <ahref="http://www.dynamicdrive.com/recommendit/">RecommendUs</a><br>
      - <ahref="http://www.dynamicdrive.com/contact.htm">EmailUs</a><br>
   </span>

</div>
</body>
</html>

体验新版博客