Using JavaScirpt we can easily implement trees in HTML, without using ASP, JSP, PHP, etc., of course, if you want to combine with the database, the following code is easy to transplant.
First, let's take a look at the JavaScript code that implements this tree structure.
Common.js
! <- function showCurrentSection () {var objCurrentSection = document.getElementById ( "navcurrentsection"); if (objCurrentSection = null!) {ObjCurrentSection.style.display = "block"; objCurrentSection.parentElement.childNodes [0] .className = "open"; if (objcurrentsection.parentelement.parentelement.nodeename == "ul") showsection (ObjcurrentSection.parentelement.parentelement);}}
function showSection (objSection) {objSection.style.display = "block"; objSection.parentElement.childNodes [0] .className = "open";! if (objSection.parentElement.parentElement = null && objSection.parentElement.parentElement.nodeName = = "Ul") showsection (Objsection.parentelement.parentelement);} ->
Below is a static HTML file that implements the tree, it is very simple.
EXAMPLE1.HTML
" HTML XMLNS = "http : //www.w3.org/1999/xhtml "XML: lang =" en "lang =" en ">
current tree node opener </ title> <meta http-equiv =" Content-Type "Content =" text / html; charSet = ISO-8859-1 "/> <link rel =" stylesheet "href =" tree.css "type =" text / css "Media =" screen "/> <meta http- Equiv = "expires" content = "- 1" /> <meta http-equiv = "pragma" Content = "no-cache" /> <meta name = "robots" content = "none" /> <meta name = " Rating "Content =" all "/> <meta name =" author "content =" bluegrass technology "/> <meta name =" email "content =" paulew@pluegrassgroup.com "/> <script language =" javascript "TYPE = "Text / JavaScript" src = "common.js"> </ script> </ head> showcurrentsection ();> <ul id = "menu"> <li> <a href = "a .htm> Section 1 </a> </ li> <li> <a href=""> section 2 </a> <ul> <li> <a href=""> section 2.1 </A> < / li> <li> <a href=""> section 2.2 </A> </ li> <li> <a href = "" > Section 2.3 </a> <ul id = "navcurrentsection"> <li> <a href=""> section 2.3.1 <</p>
<p>/ a> </ li> <li> <a href=""> section 2.3.2 </A> </ li> </ ul> </ li> <li> <a href=""> section 2.4 < / a> </ li> </ ul> </ li> <li> <a href="> section 3 </a> </ li> </ ul> </ body> </ html> below is tree Style sheet</p>
<p>Tree.css</p>
<p>Body {Font-Family: Verdana, Arial, Sans-Serif; font-size: small; background-color: #ffffff;}</p>
<p>UL # menu {border: solid 1px # 333333; border-top-width: 15px; padding: 10px; padding-top: 6px; margin: 0px; width: 200px;}</p>
<p>UL # menu Li {margin: 0px; list-style-type: none; border: solid 1px #ffff;}</p>
<p>UL # Menu Li ul {margin: 0px 0px 0px 15px; display: none;</p>
<p>UL # Menu Li A {Background-Image: URL (Closed.gif); Background-Repeat: No-repeat; Background-Position: 0px 4px; Text-Indenter: 15px; Display: block; text-decoration: none; color: # 333333;</p>
<p>UL # Menu Li A: Hover {color: # 000000; Background-Color: #eeeeeeee; Background-Image: URL (Open.gif);</p>
<p>Ok, so far, we have realized this tree, everyone may wish to demonstrate it.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-24219.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="24219" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.133</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'tsg_2B1KtXKSk4RELskLUAeAdQl_2FWO701tXO0HzHiMH6MmYpH2Of_2BlmvQFuvLwmqSgm1zWQAY6nmJQgCr_2FNLIbhA_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
