Tip: you can modify some code before running
<!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=gb2312" /><title>DIV + CSS is similar to NetEase's sliding door technology AJAX</title><style type="text/css"><!--#header { background-color: #F8F4EF; height: 200px; width: 400px; margin: 0px; padding: 0px; border: 1px solid #ECE1D5; font-family: "宋体"; font-size: 12px;}#menu { margin: 0px; padding: 0px; list-style-type: none;}#menu li { display: block; width: 100px; text-align: center; float: left; margin: 0px; padding-top: 0.2em; padding-right: 0px; padding-bottom: 0.2em; padding-left: 0px; cursor: hand;}.sec1 { background-color: #FFFFCC;}.sec2 { background-color: #00CCFF;}.block { display: block;}.unblock { display: none;}--></style></head><body><script language=javascript>Function secBoard (n) {for (I = 0; I<menu.childNodes.length;i++) menu.childNodes[i].className="sec1"; menu.childNodes[n].className="sec2"; for(i=0;i<main.childNodes.length;i++) main.childNodes[i].style.display="none"; main.childNodes[n].style.display="block"; }</script><div id="header"> <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">Latest news</li> <li onMouseOver="secBoard(1)" class="sec1">Latest article</li> <li onMouseOver="secBoard(2)" class="sec1">Latest log</li> <li onMouseOver="secBoard(3)" class="sec1">New forum posts</li> </ul> <!--内容显示区域--> <ul id="main"> <li class="block">First, welcome to the webpage special effect code.</li> <li class="unblock">The second content: Welcome to the webpage special effect code.</li> <li class="unblock">Third, welcome to webpage special effect code</li> <li class="unblock">Fourth, welcome to webpage special effect code</li> </ul> <!--内容显示区域--></div></body></html>This code is provided by the webpage special effect network.
Tip: you can modify some code before running
