Telescopic achieve secondary menu
<!DOCTYPE HTML>
<html>
<head>
<title>实现伸缩二级菜单</title>
<meta charset="utf-8" />
<style>
li{
list-style: none;
}
li span{
padding-left: 20px;
cursor: pointer;
}
.open{
background:url(img/minus.png) no-repeat center left;
}
.closed{
background:url(img/add.png) no-repeat center left;
}
.hide{
height: 0;overflow: hidden;
}
.show{
height: 100px;
}
</style>
</head>
<body>
<ul class="tree">
<li>
<span class="open" >考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li><span class="closed" >信息中心</span>
<li> Announcement </ li>
<ul class = "hide">
<li> News </ li>
<li> regulations </ li>
</ ul>
</li>
<li><span class="closed" >协同办公</span>
<ul class = "hide">
<li> Document Flow </ li>
<li> Documentation Center </ li>
<li > internal messages </ li>
<li> IM </ li>
<li> SMS alert </ li>
</ ul>
</ li>
</ ul>
</ body>
<Script> // find the class as tree All span under ul, save spanArr var Spans = document.querySelectorAll ( "ul.tree span" );
// iterate spanArr each span for ( var I = 0; I <spans.length; I ++
++ i ) {
// the current span to bind click event Toggle
Spans [i] = .onclick Toggle;
}
// function defined function toggle handle clicks triggered
function toggle () {
// if the current sub-menu is open, className for the Open
IF ( the this .className == "Open" ) {
// modify className span of is closed;
the this .className = "closed" ;
// get the current span of the next sibling, className to hide
the this .nextElementSibling.className = "hide" ;
}
the else {
// otherwise, the current sub-menu is closed
// find the class as tree under ul class is stored in the open span of OpenSpan
var OpenSpan = document.querySelector ( "ul.tree span.open" );
IF (OpenSpan) { // If not null OpenSpan
// modified to span the className Closed
openSpan.className = "Closed" ;
// Get the next sibling of the current span is modified className hide
openSpan.nextElementSibling.className = "hide" ;
}
// modify the current span is the className Open
the this .className = "Open" ;
// Get the next sibling of the current span, modifications className to Show
the this .nextElementSibling.className = "Show" ;
}
}
</ Script>
</ html>
Implement form validation with style
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> achieve form validation styled </ title>
<style>
Table {width: 700px}
/ * of the parent element 1, the n-th, last child element td * /
td: first - child {width: 60px}
/ * IEs are not supported child-Nth * /
td: Nth -child (2 ) {width: 200px}
/ * IEs * /
TD: First -child + TD {width: 200px}
/ * IEs are not supported - the total width can be adjusted by
TD: Last Child {-width: 340px} * /
TD span {Color: Red}
.vali_Info { / *The initial page, verification message is displayed * /
the display: none;
}
.txt_focus { / * put the text box is obtained when the focus * /
border - Top: Solid Black 2px;
border - left: Black Solid 2px;
background - Color: # FFCC00;
} / * when the text box loses focus off * /
.vali_success, .vali_fail {
background -repeat: NO- REPEAT;
background - position: left Center;
the display: block;
}
/ * authentication message: when verified by styles * /
{.vali_success
background the -image: URL ( "IMG / ok.png" );
padding - left: 20px;
width: 0px; height: 20px;
overflow: hidden;
}
/ * verification message: when the validation fails pattern * /
. {vali_fail
background the -image: URL ( "IMG / Warning.png" );
border: 1px Solid Red;
background - Color: #ddd;
Color: Red;
padding - left: 30px;
}
</ style>
</ head>
<Table>
<body>
<form id="form1">
<h2> increase administrator </ h2>
<TR>
<td> Name: </ td> <td>
<the INPUT name = "username" />
<span> * </ span>
</ td>
<td>
< div class = "vali_Info">
combination of up to 10 characters of letters, digits, or underscores the
</ div>
</ TD>
</ TR>
<TR>
<TD> password: </ TD>
<TD>
<INPUT type = "password" name = "pwd" />
<span> * </ span>
</td>
<td>
<div class="vali_Info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<TD colspan = "2">
<INPUT type = "Submit" value = "Save" />
<INPUT type = "RESET" value = "refill" />
</ TD>
</ TR>
</ Table>
< / form>
<Script> // get name acquired as username password box element var txtName = document.getElementsByName ( "username") [0 ];
var the txtPwd = document.getElementsByName ( "pwd") [0 ];
// Get specification elements element object password prompt information // var div = txtName.parentNode.nextElementSibling.firstElementChild;// var divP = txtPwd.parentNode.nextElementSibling.firstElementChild;//
add get focus event txtName
txtName.onfocus = function () {
the getFocus ( the this );
};
// bind get focus event
txtPwd.onfocus = function () {
the getFocus ( the this );
}
function getFocus (TXT) { // bind get focus events
// set txt_focus style for the current element
txt.className = 'txt_focus' ;
// display rules prompt, find the first parent element of the current element of siblings a child element, it is clear style
= txt.parentNode.nextElementSibling.firstElementChild.className "" ;
}
// lose focus of the event is still bound txtName
txtName.onblur = function () { // the this ==> txtName
// define the rules of regular reg: 10 characters or less the combination of letters, numbers and underscores \ W
Vali ( the this , / ^ \ {W} $ 1,10 / );
}
// binding event defocus
txtPwd.onblur = function () { // the this ==> the txtPwd
// definition rule regular reg: 6 digits \ D
Vali ( the this , / ^ \. 6 {D} $ / );
}
function Vali (TXT, REG) {
var msgDiv = txt.parentNode.nextElementSibling.firstElementChild;
// the style for acquiring focus clear
txt.className = "";
// determines whether the input content compliant
// the console.log (reg.test (this.value))
IF (reg.test (txt.value)) { // Test by
// correct tips
msgDiv.className = "vali_success" ;
} the else { // check fails
// error Indication
msgDiv.className = "vali_fail" ;
}
}
</ Script>
</ body>
</ HTML>
Read and modify attributes of the element
<!DOCTYPE HTML> <html> <head> <title>读取并修改元素的属性</title> <meta charset="utf-8" /> <style> *{ margin:0; padding: 0; } #tab li{ float: left; list-style: none; width: 80px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } #container{ position: relative; } #content1,#content2,#content3{ width: 300px; height: 100px; padding:30px; position: absolute; top: 40px; left: 0; } #tab1,#content1{ background-color: #ffcc00; } #tab2,#content2{ background-color: #ff00cc; } #tab3,#content3{ background-color: #00ccff; } .foreground { z-index: 1; } </style> <script> </script> </head> <body> <h2>实现多标签页效果</h2> <ul id="tab"> <li id="tab1">10元套餐</li> <li id = "tab2"> 30 per package </ li> <li id = "tab3"> 50 yuan monthly </ li> </ ul> <div the above mentioned id = "Container"> <-! <div the above mentioned id = "content1" class = "foreground"> -> <! - - stressed: the style attribute settings, default format is:. "attribute: value;" -> <div ID = "content1" style = "Z-index:. 1;"> 10 per package details: <br / > & nbsp; per month within the package dial 100 minutes excess wool 2 / min </ div> <div ID = "content2"> 30 yuan Package Information: <br /> & nbsp; dial 300 minutes per month within the package, the excess 1.5 wool / min </ div> <div ID = "content3"> 50 yuan monthly Details: <br /> & nbsp; per month unlimited heart beat </ div> </ div> <Script> // add the click event to all li next tab vardocument.querySelectorAll = LIS ( "# Tab> Li" ); for ( var I = 0; I <lis.length; I ++ ) { // bind click event Show LIS [I] = .onclick Show; } function Show () { // find all div id of the Container var divs = document.querySelectorAll ( "# Container> div" ); // calendar will modify the display attributes for ( var I = 0; I <divs.length; I ++ ) { // Clear zIndex property of this div divs [I] .style.zIndex = "" ; } //Get the current id Li, in which the tab is replaced Content, stored variable id var id = the this .id.replace ( "tab", "Content" ); // Get the value of div id id of the same, which is provided to zIndex . 1 document.getElementById (ID) .style.zIndex = ". 1" ; } </ Script> </ body> </ HTML>