當前位置：首頁 » 網頁設計 » 網頁樹形菜單

網頁樹形菜單

發布時間: 2021-03-02 18:23:02

❶ html中點擊樹形菜單，顯示內容，怎麼實現。

詳細內容那用DIV接收，定義ID，點擊的時候把內容給這個DIV就是了

var d= document.createElement("div");

d.innerHTML="顯示的一句話";

❷ html插入樹型菜單可以嗎、

javascript

<html>
<head>
<title>簡單樹型菜單</title>
</head>
<body>
<script language="javascript">
// 隱藏div
function hideAll() {
for(i=0;i<odiv.length;i++) {
// 用display="none"實現隱藏
odiv[i].style.display="none";
}
}
// 顯示所有的div
function showObj(num) {
if (odiv[num].style.display=="none") {
hideAll();
// 以行顯示div
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<table>
<tr >
<td>
<a href="#" onclick="showObj(0)">菜單一</a><br>
<div id="odiv" style="display:none">Menu1-1<br>Menu1-2<br>Menu1-3</div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(1)">菜單二</a><br>
<div id="odiv" style="display:none">Menu2-1<br>Menu2-2<br>Menu2-3</div>
</td>
</tr>
<tr >
<td>
<a href="#" onclick="showObj(2)">菜單三</a><br>
<div id="odiv" style="display:none">Menu3-1<br>Menu3-2<br>Menu3-3</div>
</td>
</tr>
</table>
</body>
</html>

❸ IE打不開樹形菜單

是網頁中的Jascript程序被禁止了，到IE的安全選項中修改一下。

❹ html樹形菜單如何做出點擊其他菜單欄，當前菜單欄就自動關閉的效果急急急！！

<divid="menu">
<divclass="smtitle">
<ahref=""class="smtitle_a">列表1</a>
<ul>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
<li><ahref="">列表1</a></li>
</ul>
</div>
<divclass="smtitle">
<ahref=""class="smtitle_a">列表2</a>
<ul>
<li><ahref="">列表2</a></li>
<li><ahref="">列表2</a></li>
<li><ahref="">列表2</a></li>
<li><ahref="">列表2</a></li>
</ul>
</div>
<divclass="smtitle">
<ahref=""class="smtitle_a">列表3</a>
<ul>
<li><ahref="">列表3</a></li>
<li><ahref="">列表3</a></li>
<li><ahref="">列表3</a></li>
<li><ahref="">列表3</a></li>
</ul>
</div>
</div>

<style>

#menu .smtitle ul

{

list-style: none;

display: none;

}

</style>

function initMenu() {

// $('#menu ul').hide();

// $('#menu ul.smbody').show();

$('#menu div a').click(

() {

$(this).parent().parent().find("a.smtitle_a").css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");

var checkElement = $(this).next();

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

$('#menu ul:visible').slideDown('normal');

checkElement.slideUp('normal');

checkElement.prev().css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");

return false;

}

if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

$('#menu ul:visible').slideUp('normal');

checkElement.slideDown('normal');

checkElement.prev().css("background", "url(../images/i_sm_expanded.gif) no-repeat 10px center");

return false;

}

);

}

$(document).ready(function () { initMenu(); });

</script>

樣式自已去寫一下就好了

❺ html asp.net實現樹形菜單

css里的內容↓dt{cursor:pointer;}.show{display:block;}.hidden{display:none;}js里的內容↓function menu(){ var obj = document.getElementsByTagName("dd") for(i=0;i<obj.length;i++){ if(obj[i].className=="show"){ obj[i].className="hidden"; } else{ obj[i].className="show"; } }}body里的內容↓<dl> <dt onclick="menu()">菜單1</dt> <dd class="show">子菜單1</dd> <dd class="show">子菜單2</dd> <dd class="show">子菜單3</dd> <dt>菜單2</dt> <dt>菜單3</dt></dl>這里不讓發完整的代碼，把上面的代碼放入相應的標簽就可以用了。

❻ 網頁的樹狀展開菜單顯示不全，請高手幫忙解決！

彈出窗口（或者層）是不是設置了固定尺寸了。

❼ 網頁樹形折疊菜單製作

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>  </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> <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> <li><a href="#">Web編程</a> <ul> <li class="Child"><a href="#">Java</a></li> <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> <li><a href="#">資料庫</a> <ul> <li class="Child"><a href="#">Access/SQLServer</a></li> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li> <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li> </ul></li> <li><a href="#">伺服器</a> <ul> <li class="Child"><a href="#">Windows/IIS</a></li> <li class="Child"><a href="#">Unix/Linux/Apache</a></li> <li class="Child"><a href="#">應用伺服器</a></li> </ul></li> </ul></li> <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> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> <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> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul> </div> 

希望點贊

❽ vb如何將網頁中的一個樹形菜單展開

總結下大致有3種方法：1調用js代碼。 2.直接dom方式操作文檔執行click等事件 3.用模擬鍵盤滑鼠操作的方式。

❾ CSS樹狀菜單

<head>
<title>1231</title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>

</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<ul>
<li><a href="#">zero dollars</a></li>
<li><a href="#">wrapping text</a></li>
<li><a href="#">styled form</a></li>
<li><a href="#">active focus</a></li>
<li><a href="#">shadow boxing</a></li>
<li><a href=".#">image map</a></li>
<li><a href="#">fun backgrounds</a></li>
<li><a href="#">fade scrolling</a></li>
<li><a href="#">em sized images</a></li>
</ul>

</li>
<li><a class="hide" href="index.html">MENUS</a>

<ul>
<li><a href="#" title="a coded list of spies">spies menu</a></li>
<li><a href="#" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="#" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="#" title="an unordered list with link images">link images</a></li>
<li><a href="#" title="non-rectangular links">non-rectangular</a></li>
<li><a href="#" title="jigsaw links">jigsaw links</a></li>
<li><a href="#" title="circular links">circular links</a></li>
</ul>

</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>

</li>
</ul>

<div class="clear"> </div>
</div>
</body>
</html>
運行一下試試！不知道是不是你要的效果~

❿ html與js 如何實現樹形菜單

用z-tree插件

①帶有父子關系的標准
zTreeNodes
舉例:
Js代碼
1.var zTreeNodes = [
2.{"id":1, "name":"test1", "nodes":[
3.{"id":11, "name":"test11", "nodes":[
4.{"id":111, "name":"test111"}
5."id":12, "name":"test12"}
②帶有父子關系的簡單
Array
格式
(isSimpleData)的zTreeNodes
舉例：
Js代碼
1.var treeNodes = [
2. {"id":1, "pId":0, "name":"test1"},
3.{"id":11, "pId":1, "name":"test11"},
4. {"id":12, "pId":1, "name":"test12"},
5. {"id":111, "pId":11, "name":"test111"},
例子：

(Java代碼)
①在頁面引用
zTree的js和css：
Html代碼
1.

2.<link
rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type
="text/css">
3.
4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"
></script>

閱讀全文

網頁樹形菜單

與網頁樹形菜單相關的閱讀推薦