Tab switch bar detailed analysis
The TAB bar page switching of a page on JINGdong is shown below:
Example introduction: The background of the current element changes color when the mouse is hovering
Let’s start with an example here, because we’re using the idea of exclusion. It’s helpful to understand TAB switching.
Complete code implementation:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<script>
// Need: place mouse over button, change button to yellow background (add class)
var btnArr = document.getElementsByTagName("button");
// Bind events
for(var i=0; i<btnArr.length; i++){// Bind events for each button, so use the for loop
btnArr[i].onmouseover = function () {
// [important] Exclusivity: first set the className of all buttons to null, then set the className of this button to current
// Exclusivity is used with the for loop
for(var j=0; j<btnArr.length; j++){ btnArr[j].className ="";
}
this.className = "current"; // [important] core code}}// When the mouse moves over current, restore the background color
for(var i=0; i<btnArr.length; i++){// Bind events for each button, so use the for loop
btnArr[i].onmouseout = function () { // When the mouse moves away from any button, the background color of the button is restored
this.className = ""; }}</script>
</body>
</html>
Copy the codeCode explanation:
When you hover over the current bar, the current bar will change color, using the exclusive idea: first set the className of all buttons to null, and then set the className of my (this) button to current to achieve the effect of color change. The core code is:
// Exclusivity: set the className of all buttons to null, then set the className of my (this) button to current
// Exclusivity is used with the for loop
for(var j=0; j<btnArr.length; j++){ btnArr[j].className ="";
}
this.className = "current";
Copy the codeThe results are as follows:
TAB switch: preliminary code
The code is as follows:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
// Need: mouse over li, li itself changes color (add class), corresponding span is displayed (add class);
1. Light up the box above. 2. Use the index value to display the box below.
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
for(var i=0; i<liArr.length; i++){// Bind index value (add a custom attribute: index attribute)
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1. Light up the box above. 2. Use the index value to display the box below. (Exclusivity)
for(var j=0; j<liArr.length; j++){ liArr[j].className ="";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //}}}</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">shoes</li>
<li>socks</li>
<li>hat</li>
<li>The trousers</li>
<li>The skirt</li>
</ul>
<span class="show">shoes</span>
<span>socks</span>
<span>hat</span>
<span>The trousers</span>
<span>The skirt</span>
</div>
</body>
</html>
Copy the codeThe implementation effect is as follows:
The core of the code above is:
for(var i=0; i<liArr.length; i++){// Bind index value (add a custom attribute: index attribute)
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1. Light up the box above. 2. Use the index value to display the box below. (Exclusivity)
for(var j=0; j<liArr.length; j++){ liArr[j].className ="";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //}}Copy the codeIn this code, we give liArr[I] an index attribute: liArr[I]. Index = I, and then make the span corresponding to the index display: spanArr[this.index]. ClassName = “show”.
This is not easy to understand. In fact, another easy to understand method is to add index attribute to liArr[I], because the added attribute can be displayed on the tag in this way. This leads to code like the following:
for(var i=0; i<liArr.length; i++){// Bind index values (custom attributes) using Attribute method [Important]
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3. Write event drivers (exclusive thinking)
//1. Light the box. 2. Display boxes with index values. (Exclusivity)
for(var j=0; j<liArr.length; j++){ liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class"."current");
spanArr[this.getAttribute("index")].setAttribute("class"."show"); }}Copy the codeThe display is the same, but the difference is that the li tag does add a custom index attribute:
In order for multiple TAB columns to be independent of each other, we need to extract them by encapsulating functions, hence the following modified version of the code.
TAB Switching: Improved code (function encapsulation)
Method 1: Set the index value for the current tag
Complete version of the code implementation:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
// Need: mouse over the top li, li itself changes color (add class), the corresponding span is displayed below (add class);
1. Light up the box above. 2. Use the index value to display the corresponding box below.
// get all the boxes
var boxArr = document.getElementsByClassName("box");
// make each box call a function
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
}
function fn(element) {
var liArr = element.getElementsByTagName("li"); // Note that element gets the event source, not document
var spanArr = element.getElementsByTagName("span");
//2. Bind events (loop bind)
for (var i = 0; i < liArr.length; i++) {
// Bind index value (add a custom attribute: index attribute)
liArr[i].index = i;
liArr[i].onmouseover = function () {
//3. Write event drivers (exclusive thinking)
//1. Light up the box above. 2. Use the index value to display the box below. (Exclusivity)
for (var j = 0; j < liArr.length; j++) {
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; // [important] core code}}}}</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">shoes</li>
<li>socks</li>
<li>hat</li>
<li>The trousers</li>
<li>The skirt</li>
</ul>
<span class="show">shoes</span>
<span>socks</span>
<span>hat</span>
<span>The trousers</span>
<span>The skirt</span>
</div>
<div class="box">
<ul>
<li class="current">shoes</li>
<li>socks</li>
<li>hat</li>
<li>The trousers</li>
<li>The skirt</li>
</ul>
<span class="show">shoes</span>
<span>socks</span>
<span>hat</span>
<span>The trousers</span>
<span>The skirt</span>
</div>
<div class="box">
<ul>
<li class="current">shoes</li>
<li>socks</li>
<li>hat</li>
<li>The trousers</li>
<li>The skirt</li>
</ul>
<span class="show">shoes</span>
<span>socks</span>
<span>hat</span>
<span>The trousers</span>
<span>The skirt</span>
</div>
</body>
</html>
Copy the codeNote that by wrapping the fn function, we get the element with the element argument, not the document. This allows for an “abstract” effect, where the tabs are independent of each other.
In the code above, we give liArr[I] an index attribute: liArr[I].index = I, and then make the index corresponding to the span display: spanArr[this.index].className = “show”.
LiArr [I] can add an index attribute to liArr[I], because the added attribute can be displayed on the tag. This leads to the following method two.
Method 2: Set the index value using attribute
Based on the code in method 1 above, we modify the js part of the code, leaving the rest of the code unchanged. The code for the js part is as follows:
<script>
window.onload = function () {
// Need: mouse over the top li, li itself changes color (add class), the corresponding span is displayed below (add class);
1. Light up the box above. 2. Use the index value to display the corresponding box below.
// get all the boxes
var boxArr = document.getElementsByClassName("box");
// make each box call a function
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
}
function fn(element) {
var liArr = element.getElementsByTagName("li"); // Note that element gets the event source, not document
var spanArr = element.getElementsByTagName("span");
//2. Bind events (loop bind)
for (var i = 0; i < liArr.length; i++) {
// Bind index values (custom attributes)
liArr[i].setAttribute("index", i);
liArr[i].onmouseover = function () {
//3. Write event drivers (exclusive thinking)
//1. Light the box. 2. Display boxes with index values. (Exclusivity)
for (var j = 0; j < liArr.length; j++) {
liArr[j].removeAttribute("class"); // Note that this is class, not className
spanArr[j].removeAttribute("class");
}
this.setAttribute("class"."current");
spanArr[this.getAttribute("index")].setAttribute("class"."show"); }}}}</script>
Copy the codeHowever, method one should be more common than method two.
Conclusion: Function encapsulation ensures that the tabs can be switched without interrupting each other. The final result is as follows:
The second part
The following is an example of a box hiding method
DOM manipulation exercises
Example 1: Show and hide the box when the button is clicked.
Code implementation:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">hidden</button>
<div>One life,</div>
<script>
// Need: Click button to hide the box. Change the text before clicking the button to display it.
/ / steps:
//1. Get the event source and related elements
//2. Bind events
//3. Write the event driver
//1. Get the event source and related elements
var btn = document.getElementById("btn");
var div1 = document.getElementsByTagName("div") [0];
//2. Bind events
btn.onclick = function () {
//3. Write the event driver
// Determine the innerHTML property value of the BTN, hide the box if it is hidden, and change the button content to show.
// Otherwise, display and modify the button content to hide
if (this.innerHTML === "Hidden") {
div1.className = "hide";
// Modify the text on the button (innerHTML)
btn.innerHTML = "Show";
} else {
div1.className = "show";
// Modify the text on the button (innerHTML)
btn.innerHTML = "Hidden"; }}</script>
</body>
</html>
Copy the codeCode explanation:
When the box is in the display state, it is set to hide; When the box is hidden, it is set to show. Notice the logical judgment here.
In addition, you use the innerHTHL property, which modifies the text displayed on the button.
The code should look like this:
20180127_1518.gif
Example 2: Photo album
Here’s a recommended site:
- Meas images are generated online: placeholder.com/
The advantage is: before the material is made, first leave empty space, convenient for later change. Such as via.placeholder.com/400×300 this link 400 * 300 placeholder images can be generated.
Requirements:
- (1) Click on the small image and change the SRC attribute value of the large image below to the href attribute value in the link A.
- (2) let p tag innnerHTML attribute value, become a tag title attribute value.
To implement the beauty album, the code is as follows:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica"."Arial", serif;
color: # 333;
margin: 1em 10%;
}
h1 {
color: # 333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>Beauty gallery</h2>
<a href="#">registered</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title=A "beauty">
<img src="image/1-small.jpg" width="100" alt="The beauty 1"/>
</a>
</li>
<li>
<a href="image/2.jpg" title="The beauty B">
<img src="image/2-small.jpg" width="100" alt="The beauty of 2"/>
</a>
</li>
<li>
<a href="image/3.jpg" title="The beauty C">
<img src="image/3-small.jpg" width="100" alt="Three beauties"/>
</a>
</li>
<li>
<a href="image/4.jpg" title="The beauty D">
<img src="image/4-small.jpg" width="100" alt="The beauty 4"/>
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="image/placeholder.png" width="450px"/>
<p id="des">Select an image</p>
<script>
/ / requirements:
// (1) Click on the small image and change the SRC property value of the large image below to the href value of the link a.
// (2) change the p tag innnerHTML attribute value to a tag title attribute value.
//1. Get the event source and related elements
// Use the element to get the tag below it.
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a");
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2. Bind events
// It used to be a single binding, but now it is an array. We bind with a for loop
for (var i = 0; i < aArr.length; i++) {
aArr[i].onclick = function () {
//3. [core code] write event driver: modify attribute values
img.src = this.href; // This refers to the function caller, and has nothing to do with I, so there is no error.
// img.src = aArr[i].href; Note that this line of code is not written like this
des.innerHTML = this.title;
return false; //return false prevents further execution of the following code.}}</script>
</body>
</html>
Copy the codeCode explanation:
(1) Get the event source: We get the A element in ul by ul.getelementsByTagName (” A “).
(2) Bind events: Because we are binding an array, we use the for loop to bind
Img. SRC = aArr[I].href = img. SRC = aArr[I].href Because this refers to the caller of the function. If I write the latter, when I becomes a 4, it stays a 4. Obviously not.
(4) The last line of the code: return false means: prevent further execution of the following code.
The results are as follows:
Example 3: A large two-dimensional code is displayed when the mouse is hovering
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.code {
width: 50px;
height: 50px;
}
.code a {
display: block;
width: 50px;
height: 50px;
background: url(http://img.smyhvae.com/20180127_QRcode_small.png) no-repeat -159px -51px;
position: relative;
}
.code-big {
position: absolute;
top: 10px;
left: 80px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script>
window.onload = function () {
// Add the show class name and remove the hide class name.
// Mouse over a link to hide the QR code (add hide class name, remove show class name)
//1. Get the event source and related elements
var a = document.getElementsByTagName("a") [0];
var div = document.getElementsByClassName("code-big") [0];
//2. Bind events
a.onmouseover = fn1; // When the mouse is hovering
a.onmouseout = fn2; // Mouse away
// Define the method
function fn1() {
//3. Write the event driver
div.className = "code-big show";
//div.className = div.className.replace("hide", "show");
}
function fn2() {
div.className = "code-big hide";
// String operation, replace string hide with show.
// div.className = div.className.replace("show","hide");}}</script>
</head>
<body>
<div class="code">
<a href="#"></a>
<img src="http://img.smyhvae.com/2016040102.jpg" alt="" class="code-big hide"/>
</div>
</body>
</html>
Copy the codeEffect:
20180127_1800.gif
Attributes of a form element
The attributes of a form element include type, Value, Checked, selected, and disabled.
Example 1: Disable/undisable text boxes
<body>Account:<input type="text" value=""/><button>disable</button><button>Lifting the ban</button><br><br>Password:<input type="password" value="aaabbbccc"/>
<script>
var inp = document.getElementsByTagName("input") [0];
var btn1 = document.getElementsByTagName("button") [0];
var btn2 = document.getElementsByTagName("button") [1];
btn1.onclick = function () {
inp.disabled = "no"; // Disable text boxes. You can write any string in the property value, but it cannot be empty.
}
btn2.onclick = function () {
inp.disabled = false; // Unblock the text box. Let the disabled attribute disappear.
// inp.removeAttribute("disabled");
}
</script>
</body>
Copy the codeWhen a text box is disabled, the text box is read-only and cannot be edited.
As you can see from the above code, the code to disable the text box is:
inp.disabled = "no"; // Make the disabled attribute appear to disable it
Copy the codeThe goal is for the disabled property to appear, which can be disabled. So, you can write numbers, you can write any string, but you can’t write 0, you can’t write false, you can’t write null. Normally we write no.
The code to unban a text box is:
inp.disabled = false; // Method 1: Make the disabled attribute disappear to unblock.
inp.removeAttribute("disabled"); // Method 2: Recommended
Copy the codeThe goal is to remove the disabled property to unblock it. The property value can be false or 0. But we generally use mode 2 to lift the ban.
Example 2: A text box gets focus/loses focus
Careful readers will find that jingdong and Taobao’s search box, get focus, prompt text experience is different.
Jingdong:
20180127_2000.gif
Taobao:
20180127_2005.gif
In fact, taobao’s prompt text, is to use an absolute positioning of the separate label to do.
Jingdong is to judge whether the input box gets focus; Taobao is to judge whether there is a user input text in the input box.
So let’s implement that now. The code is as follows:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>Jingdong:<input id="inp1" type="text" value="Microsingle camera"/><br><br>Taobao:<label for="inp2">An electric toothbrush</label><input id="inp2" type="text"/><br><br>
placeholder: <input type="text" placeholder="I'm a placeholder"/>
<script>
// Demand: jingdong input button gets focus, immediately delete content. Cursor displays text after loss.
var inp1 = document.getElementById("inp1");
inp1.onfocus = function () {
// Determine if the content in the input is "micro single camera", then assign the value to "";
if (this.value === "Microsingle camera") {
inp1.value = "";
inp1.style.color = "# 000"; }}// Lose focus events
inp1.onblur = function () {
// Determine: if the input content is empty, then the content is assigned to micro single camera.
if (this.value === "") {
inp1.value = "Microsingle camera";
inp1.style.color = "#ccc"; }}// Need: input text in input, label hidden; When the text inside becomes an empty string, label is displayed.
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label") [0];
//2. Bind event (this event is triggered when typing and deleting text)
inp2.oninput = function () {
// Determine if the value in the input is empty. If it is empty, label is displayed, otherwise hidden.
if (this.value === "") {
lab.className = "show";
} else {
lab.className = "hide"; }}</script>
</body>
</html>
Copy the codeThe implementation effect is as follows:
As shown above, we can also do it with placeholder, but IE678 does not support it, so it is not recommended.
Example 3: If the user registration information is incorrect, the input box loses focus and is highlighted.
Code implementation:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrong {
border: 2px solid red;
}
.right {
border: 2px solid #91B81D;
}
</style>
</head>
<body>Account:<input type="text" onblur="fn(this)"/><br><br>Password:<input type="password" onblur="fn(this)"/>
<script>
// Requirements: Determine the value of the input button when losing focus. If the account or password is between 6 and 12 characters, an error is reported otherwise.
function fn(aaa){
// When function is called in the input line of HTML, it is called in the window first, so printing this equals printing the window
// console.log(this)
// Only the passed this refers to the tag itself.
// console.log(aaa)
// console.log(this.value)
if(aaa.value.length < 6 || aaa.value.length>12){
aaa.className = "wrong";
}else{
aaa.className = "right"; }}</script>
</body>
</html>
Copy the codeThis time we are calling function inside the tag, in this case we are calling function through the window first. So we call this inline.
Effect:
Example 4: Full selection and reverse selection
The corresponding code is as follows:
<! DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; } .my-table { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th.td { border: 1px solid #d0d0d0; color: # 404060; padding: 10px; } th { background-color: #09c; font: bold 16px Microsoft Yahei; color: #fff; } td { font: 14px Microsoft Yahei; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style>
<script>
window.onload = function () { // Requirement 1: Click input above and select all or reverse below. // Check whether the checked property is true or false. If true, all the following items will be true. False in the same way. var topInp = document.getElementById("title"); var tbody = document.getElementById("content"); var botInpArr = tbody.getElementsByTagName("input"); Topinp.onclick = function () {var I =0; i</script>
</head>
<body>
<div class="my-table">
<table>
<thead>
<tr>
<th> <input type="checkbox" id="title" /> </th>
<th>dishes</th>
<th>The hotel</th>
</tr>
</thead>
<tbody id="content">
<tr>
<td> <input type="checkbox" /> </td>
<td>Food 1</td>
<td>Cabin BBQ</td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>To order the 2</td>
<td>Steamed restaurant</td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>To order the 3</td>
<td>Haidilao hot pot</td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>4 dishes</td>
<td>The king of pastry</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Copy the codeNote the comments in the code; requirement 2 is the hard part, where the for loop is used twice. The first for loop is because we bind events to each input.
The results are as follows:
