1、請教DW 中的可折疊式面板問題
這個問題,如果我沒理解錯的話,應該要用到setTimeOut這個函數了。
不過,具體要怎麼改,大概還不大好說清楚,因為,你的描述,我還是沒看太懂呀,你可以通過追問的方式,再把問題細說一下。
2、網頁折疊面板代碼
<script language=javascript>
function f()
{
if(div1.style.display=="")
{
div1.style.display="none";
}
else
{
div1.style.display="";
}
}
</script>
<input type=button value=click onclick=f()>
<div id=div1>
這里的文字將折疊
</div>
重點:
1、div1.style.display="" //讓層顯示
2、div1.style.display="none" //讓層隱藏
3、記專得給我分屬!呵呵。
3、請教一個網頁製作問題:怎樣製作折疊頁面
首先,你要利用布局表格和布局單元格製作一個樣式,然後每做一個付頁都以這個樣式為基礎就行了。比如左側和上部為台頭和導航,中間部分為展示區域,然後每個付頁都做成這樣,就可以了。
4、網頁樹形折疊菜單製作
JavaScript Code: function Ob(o){ var o=document.getElementById(o)?document.getElementById(o):o; return o; } function Hd(o) { Ob(o).style.display="none"; } function Sw(o) { Ob(o).style.display=""; } function ExCls(o,a,b,n){ var o=Ob(o); for(i=0;i<n;i++) {o=o.parentNode;} o.className=o.className==a?b:a; } function CNLTreeMenu(id,TagName0) { this.id=id; this.TagName0=TagName0==""?"li":TagName0; this.AllNodes = Ob(this.id).getElementsByTagName(TagName0); this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) { this.ClassName0=ClassName0; this.ClassName1=ClassName1; this.ClassName2=ClassName2; this.ImgUrl=ImgUrl || "css/s.gif"; this.ImgBlankA ="<img src=\"css/s.gif\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展開/折疊\" />"; this.ImgBlankB ="<img src=\"css/s.gif\" class=\"s\" />"; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""; this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML; } } this.SetNodes = function (n) { var sClsName=n==0?this.ClassName0:this.ClassName1; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName; } } } CSS Code: .CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;} .CNLTreeMenu ul {padding:0;} .CNLTreeMenu li {list-style:none;padding:0;} .Closed ul {display:none;} .Child img.s {background:none;cursor:default;} #CNLTreeMenu1 ul {margin:0 0 0 17px;} #CNLTreeMenu1 img.s {width:20px;height:15px;} #CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;} #CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;} #CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;} #CNLTreeMenu2 ul {margin:0 0 0 17px;} #CNLTreeMenu2 img.s {width:17px;height:15px;} #CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;} #CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;} #CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;} #CNLTreeMenu3 ul {margin:0 0 0 17px;} #CNLTreeMenu3 img.s {width:34px;height:18px;} #CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;} html code: <p> <!--CNLTreeMenu Start:--> </p> <div class="CNLTreeMenu" id="CNLTreeMenu1"> <h4>CNL Tree Menu1</h4> <p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展開</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折疊</a></p> <ul> <li class="Opened"><a href=" http://www.iecn.net ">IECN.Net</a> <ul> <li><a href="#1">技術區</a> <ul> <li><a href="#">網頁技術</a> <ul> <li class="Child"><a href="#">JavaScript</a></li><!--Child Node--> <li class="Child"><a href="#">HTML/XHTML/CSS</a></li> <li class="Child"><a href="#">Ajax</a></li> <li class="Child"><a href="#">網頁製作工具</a></li> <li class="Child"><a href="#">設計/圖形</a></li> <li class="Child"><a href="#">Flash/多媒體</a></li> <li class="Child"><a href="#">VML/Web3D</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">Web編程</a> <ul> <li class="Child"><a href="#">Java</a></li><!--Child Node--> <li class="Child"><a href="#">.Net</a></li> <li class="Child"><a href="#">ASP/VBScript</a></li> <li class="Child"><a href="#">PHP</a></li> <li class="Child"><a href="#">Perl/Python</a></li> <li class="Child"><a href="#">Web綜合/開源</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">資料庫</a> <ul> <li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node--> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li> <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">伺服器</a> <ul> <li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node--> <li class="Child"><a href="#">Unix/Linux/Apache</a></li> <li class="Child"><a href="#">應用伺服器</a></li> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二級目錄</a> <ul> <li><a href="#">三級目錄</a> <ul> <li><a href="#">四級目錄</a> <ul> <li><a href="#">五級目錄</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n級目錄</a> <ul> <li class="Child"><a href="#">葉結點1</a></li><!--Child Node--> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二級目錄</a> <ul> <li><a href="#">三級目錄</a> <ul> <li><a href="#">四級目錄</a> <ul> <li><a href="#">五級目錄</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n級目錄</a> <ul> <li class="Child"><a href="#">葉結點1</a></li><!--Child Node--> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> </ul></li><!--Sub Node 1 --> </ul> </div><!-- CNLTreeMenu --> <!--CNLTreeMenu1 End!-->
希望採納
5、網頁設計怎麼將一部分內容折疊起來
折疊一般用hide()
引用jQuery
然後用 $("#div1").hide() 就能把id為div1的區域隱藏起來了。保留title的顯示,就能做到你說的折疊
6、html折疊面板代碼無法實現效果
確認一下
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
這幾抄個文件有沒襲有引入進來,有可能是你的網慢,沒有引入
7、dreamweaver網頁設計中使用spry可折疊面板時,怎樣設計面板的更漂亮
樣式只能做出樣子出來,真正把功能實現你還需要運用到JS
8、dreamweaver裡面的可折疊面板,可以可以自己設置樣式?就是自己設置背景啥的
你把這個設置在css樣式表裡面
9、網頁折疊菜單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>每次只展開一組的折疊菜單</title>
<style type="text/css">
*{ margin:0px; padding:0px; border:0px; }
body{ font-size:12px; color:#333;text-align:center;}
.ztbox{ background:#fff;}
.ztbox{text-align:left;width:220px;height:auto;border:solid 1px #2173f7;margin:10px auto 0px;overflow: hidden;position: absolute;left: 10px;top: 0px; }
.ztbox h2{font-size:14px;height:22px;line-height:22px;background:#c6d5ff;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #2173f7; font-weight:normal;cursor:pointer;}
.ztbox h2 span{font-weight: normal;position:absolute;top:0;right:6px;}
.ztbox li{border-bottom:dashed 1px #eee;}
.ztbox {border-bottom:solid 1px #2173f7;}
.ztlist{ list-style:disc url(none); margin:6px 10px 6px 20px;}
</style>
</head>
<body>
<div id="ztbox" class="ztbox" style="left: 10px; width: 149px;">
<h2 id="t1" onclick="ShHi('t1','h1');">
標題1
</h2>
<ul class="ztlist" id="h1" style="display:none;">
<li>
這里可以放很多的內容...
</li>
</ul>
<h2 id="t2" onclick="ShHi('t2','h2');">
標題2
</h2>
<ul class="ztlist" id="h2" style="display:none;">
<li>
這里可以放很多的內容...
</li>
</ul>
</div>
<script type="text/javascript">
var clickul,clickh;
function $(d){return document.getElementById(d);}//這里聲明一個$函數簡化了代替了getElementById,以後$('aa')就相當於docudocument.getElementById('aa');
function f(d){//這個方法用來獲得DHTMLElement的style屬性(style屬性和CSS的是對應的)如果沒有這樣ID的DHTMLElement則返回空值
var t=$(d);if (t){return t.style;
}else{
return null;
}
}
function Hi(){//隱藏
if(clickul)clickul.style.display='none';
}
function Hl(){//把層的字體變回正常
if(clickh)clickh.style.fontWeight='normal';
}
function h(d){//判斷這個DHTMLElement是不是隱藏的
var s=f(d);
var b=s.display;
if (b=='none'){
return true;
}else{
return false;
}
}
function ShHi(ii,jj){
if(h(jj)){//判斷是不是隱藏
Hi();
Hl();
f(jj).display='block';//把jj(傳入來的參數)為ID的層顯示出來
f(ii).fontWeight='bold';//字體變為『BOLD』
clickul=$(jj);clickh=$(ii);
}else{//如果JJ不隱藏,執行下面的
Hi();
Hl();
f(jj).display='none';//隱藏
f(ii).fontWeight='normal';//字體變回正常
clickul=null;clickh=null;
}
}</script></body></html>
不明白「和添加菜單的下滑時間功能」是什麼功能
所以沒有寫
任何疑問:
blog.csdn.net/shmilyhe
或
[email protected]
10、設計一個網頁折疊菜單,如何設置它默認為關閉狀態?
在你想隱藏的折疊菜單外層的盒子加上這個CSS屬性:display:none;就好了