The ZDNet chinadiv element is an element for providing structures and backgrounds for the contents of the block-level in the HTML document. All content between the start tag and the end tag is used to constitute this block, where the characteristics of the elements are controlled by the attribute of the DIV tag, or by using the style table formatted this block. Internet Explorer and Netscape browsers support DIV tags.
Many developers of Div and Span confused the DIV elements with the span element. Although they are identical, SPAN is used to define embedded content rather than large block content. You can use a DIV tag for paragraphs, but SPAN is useful for imparting special features for one or more words in paragraphs.
The DIV tag allows you to split a web page to format and demonstrate it. It can be used in combination with the skill of visibility to split the contents of the page and display the content you choose.
The sample code below uses the DIV tab to split the page into multiple areas; hyperlinks will display and hide these areas:
Div test </ title> <script language = "javascript" .> function setAllVisible () {document.getElementById ( "section1") style.visibility = "hidden"; document.getElementById ( "section2") style.visibility = "hidden";.. document.getElementById ( "section3") style .visibility = "hidden"; Document.GtelementByid ("Section4"). style.visibility = "hidden";} </ script> </ head> <body online = 'setallvisible ();> <h1> builder.com Sample </ h1> <ul> <li> <a href = "#" onclick = 'document.GtelementByid ("Section1"). Style.visibility = "visible"; document.getlementByid ("Section2"). Style.visibility = "Hidden"; Document.getlementByid ("Section3"). style.visibility = "hidden"; document.getlementByid ("Section4"). style.visibility = "hidden"; '> section 1 </A> </ li > <li> <a href = "#" onclick = 'document.getlementByid ("Section1"). style.visibility = "hidden"; document.getlementByid ("section2"). style.visibility = "visible"; document. getElementByid ("Section3"). style.visibility = "hidden"; Document.GetElementByid ("Section4" ) .style.visibility = "hidden"; '> section 2 </a> </ li> <li> <a href = "#" onclick =' document.getlementByid ("Section1"). style.visibility = "Hidden "; Document.getlementByid (" Section2 "). style.visibility =" hidden "; document.getlementByid (" Section3 "</p>
<p>) .Style.visibility = "visible"; document.getlementByid ("Section4"). style.visibility = "hidden"; '> section 3 </a> </ li> <li> <a href = "#" onclick . = 'document.getElementById ( "section1") style.visibility = "hidden"; document.getElementById ( "section2") style.visibility = "hidden";.. document.getElementById ( "section3") style.visibility = " Hidden "; Document.GtelementByid (" Section4 "). style.visibility =" visible "; '> section 4 </a> </ li> </ ul> <br> <div id =" section> section 1 text </ div> <div id = "section2"> section 2 text. </ div> <div id = "section3"> section 3 text. </ div> <div id = "section4"> section 4 text. < / Body> </ html> This code includes a JavaScript function to hide all DIV elements. This function is called when the document is loaded. Clicking on each hyperlink will display the relevant area and hide other areas. One of this way is that only Internet Explorer 5 or higher browsers and Netscape Navigator 6 or later browsers support these methods. However, I used Mozilla 1.01 to test, no problem. Only display information when necessary</p>
<p>Combine the powerful capabilities of DHTML and JavaScript to allow you to preload the contents of the page and display their part when appropriate. This can improve the response time, so it is possible to provide a higher performance.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-113803.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="113803" 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.058</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 = '18M5Mv1VFbzCwJw3RtIpb4UWPcV8HseYdzwW9TBeCtwD7Q3z8h4YT8wfS71LwjVVrXkb3kvqkJlUCp_2Fsc_2BeLwA_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>
