Javascript achieves the effect of tabs on a simple black sliding webpage _ javascript tips-js tutorial

This article mainly introduces how js implements the black simple sliding door webpage tab effect, and enables simple mouse sliding over the tab item to switch the corresponding menu function, it involves javascript mouse events to control page element traversal and style change implementation skills and has some reference value, if you need it, refer to the example in this article to describe how js achieves the effect of a simple black sliding door webpage tab. Share it with you for your reference. The details are as follows:

This is a js-implemented black-style webpage sliding menu. Although it is concise, it does not seem to be blank. You can change it to a tab with a slight modification. If you are familiar with JS, you can modify it, change to the style you like.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-simple-black-style-web-tab-codes/

The Code is as follows:

 Black simple TabScript window. onload = function () {var oLi = document. getElementById ("tab "). getElementsByTagName ("li"); var oUl = document. getElementById ("content "). getElementsByTagName ("ul"); for (var I = 0; I <oLi. length; I ++) {oLi [I]. index = I; oLi [I]. onmouseover = function () {for (var n = 0; n <oLi. length; n ++) oLi [n]. className = ""; this. className = "current"; for (var n = 0; n <oUl. length; n ++) oUl [n]. style. display = "none"; oUl [this. index]. style. display = "block"} script
 
 
 
 
  
  
Lesson 1
 
  
  
Lesson 2
 
  
  
Lesson 3
 
 
 
 
 
 
 
  
  
  
Analysis of webpage Special Effects
  
  
  
Respond to user operations
  
  
  
Prompt box Effect
  
  
  
Event-driven
  
  
  
Element attribute operations
  
  
  
Write the first JS special effect
  
  
  
Introduce Functions
  
  
  
Webpage skin change Effect
  
  
  
Expand/contract the playback list
 
 
 
 
 
 
  
  
  
Change Webpage background color
  
  
  
Function Parameters
  
  
  
Compilation of highly reusable Functions
  
  
  
126 select all emails
  
  
  
Loop and traversal operations
  
  
  
Simple use of the debugger
  
  
  
Composition of typical loops
  
  
  
For Loop and if judgment
  
  
  
Use of className
  
  
  
Use of innerHTML
  
  
  
Cannes impressions
  
  
  
Array
  
  
  
String connection
 
 
 
 
 
 
  
  
  
JavaScript composition: ECMAScript, DOM, BOM, JavaScript compatibility Source
  
  
  
Location, advantages and disadvantages of JavaScript
  
  
  
Variable, type, typeof, data type conversion, variable scope
  
  
  
Closure: What are the disadvantages of closure, simple application, and closure?
  
  
  
Operators: arithmetic, value assignment, relation, logic, and other operators
  
  
  
Program Process Control: Judgment, loop, jump out
  
  
  
Naming rules: naming rules and necessity, Hungarian naming law
  
  
  
Function Description: Function composition, calling, events, passing parameters, variable parameters, and return values
  
  
  
Timer usage: setInterval and setTimeout
  
  
  
Timer application: webmaster station navigation Effect
  
  
  
Timer application: automatic playback Tab
  
  
  
Timer application: Digital Clock
  
  
  
Program debugging method
 
 
 
 

I hope this article will help you design javascript programs.