How CSS uses ID and class to control instance analysis of element styles

Now there is an example that requires:

1) Draw five boxes, respectively, with red, purple, orange, green, blue font color to express;

2) When the mouse clicks on one of the boxes, the border is bold and displays the color consistent with the box's font color;

Effects such as:

(Fig. 1) box

Here is the concrete implementation of the idea:

First, HTML content construction

First, the HTML content is used to express five box contents, the code is as follows:

<ul id= ' Levelgroup ' >    <li id= ' level1 ' > Red </li>    <li id= ' level2 ' > Violet </li>    < Li id= ' level3 ' > Orange </li>    <li id= ' level4 ' > Green </li>    <li id= ' Level5 ' > Blue </li> </ Ul>

second, the original style implementation

Using CSS to express the above requirements 1 style requirements, CSS code is as follows:

body{    font-size:10px;} #levelGroup {list-style:none;border:1px solid gray;height:40px;width:200px;overflow:hidden;padding:10px;} #level1 {border:1px solid gray;width:20px;height:20px;float:left;color:red;margin-right:5px;text-align:center; padding-top:5px;} #level2 {border:1px solid gray;width:20px;height:20px;float:left;color:purple;    margin-right:5px;text-align:center;padding-top:5px;} #level3 {border:1px solid gray;width:20px;height:20px;float:left;color:orange;    margin-right:5px;text-align:center;padding-top:5px;} #level4 {border:1px solid gray;width:20px;height:20px;float:left;color:green;    margin-right:5px;text-align:center;padding-top:5px;} #level5 {border:1px solid gray;width:20px;height:20px;float:left;color:blue;    margin-right:5px;text-align:center;padding-top:5px;}

The effect of Figure 1 can now be completed.

Third, interactive style implementation

Next, by analyzing demand 2, we found that as long as you clicked on each Li element, you gave the element a bold and color-changing style. So how to add a style, usually we do is to add a class (Class) attribute for each Li, and set the class CSS style (border bold, color change), the specific CSS code is as follows:

. level1_selected{  border:2px solid red!important;}. LEVEL2_SELECTED{BORDER:2PX solid purple!important;}. LEVEL3_SELECTED{BORDER:2PX solid orange!important;}. LEVEL4_SELECTED{BORDER:2PX solid green!important;}. LEVEL5_SELECTED{BORDER:2PX solid blue!important;}

Next, the code that uses JS to control the interaction style is as follows:

$ ("#levelGroup li"). Click (function ()         //First gets the index of the element      var index = $ (this). index ();      Then add the corresponding CSS interactive style to the Li       var para_index = index+1;       $ (this). AddClass ("Level" +para_index+ "_selected");     Also revert the style of the other Li elements to the initial state     $ ("#levelGroup Li"). each (function () {        var Curindex = $ (this). index ();        if (Curindex!=index) {                          curindex = curindex+1;             $ (this). Removeclass ("Level" +curindex+ "_selected");       }    );

});

The results of the final implementation are shown in 2:

Figure (2) Interactive a interaction B

Four, code optimization

problem: by observing the implementation of the above code, the reader may soon find a problem:JS code operation cumbersome, but also to traverse, the overall efficiency is low .

Analysis: So how to improve and optimize it? Through analysis, we found that the code in JS is complicated because each LI element needs 1 of the original style is controlled by the ID, such as #level1{... }, and the interactive style of Requirement 2 is controlled by the class attribute, such as. level1_selected{...}, and the original and interactive styles of each Li element are different, so the interaction must be indexed and traversed to implement the style changes.

Workaround: since it is the CSS style settings, then how to design changes, in fact, here we can follow the idea: as little as possible to add new control classes, to reduce the subsequent JS operation. For example, the above method is to add a "check class" for each Li in the solution of demand 2, such as Class level1_selected, class level2_selected .... The ideal workaround here is to add only one class selected, but the selected class is used in conjunction with each Li ID to ensure that each selected class has a different style. Maybe some students come here not how to read, it's OK! Look at the code below to find out.

Redesign the interaction of Requirement 2 (selected)

#level1. selected{border:2px solid Red;} #level2. selected{border:2px solid Purple;} #level3. selected{border:2px solid Orange;} #level4. selected{border:2px solid Green;} #level5. selected{border:2px solid Blue;}

Then, we can look at the JS in the code is how to change, readers can also be based on my changing style class to write their own JS operation code, is it the same as I wrote below?

$ ("#levelGroup li"). Click (function () {         $ (this). AddClass ("selected"). Siblings (). Removeclass ("selected");});

Read the Code of you, is not feeling as happy as I am, after all, just changed the CSS add Class way, you can let the subsequent JS code so concise! So here is a conclusion (mentioned above): as little as possible to increase the new control class, to reduce the subsequent JS operation.