CSS uses ID and class to control element style tips Summary

Now there is an example that requires:

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

2 mouse clicks on one of the boxes, the border is bold and displays the color of the same color as the box font;

The effect of the following figure:

(Figure 1) Box effect chart

The following are the specific implementation ideas:

First, HTML content construction

First Use HTML content 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 requirement 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;

}

You can now complete the effect of Figure 1.

three, interactive style implementation

Then by analyzing requirement 2, we find that as long as we click on each LI element, we can achieve it by giving the element a bold and color-changing style. So how to add a style, usually our approach is to add a class (Class) attribute for each Li, and set the 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 use of JS control interactive style code is as follows:

$ ("#levelGroup li"). Click (function ()
   
      ///First gets the index of the element
var index = $ (this). index ();


Then add the corresponding CSS interaction style for the Li
var para_index = index+1;
$ (this). AddClass ("Level" +para_index+ "_selected");


Also, restore the style of 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 effect of the final implementation is shown in Figure 2:

Figure (2) interactive effect diagram A interactive effect diagram B

Four, code optimization

problem: by looking at the implementation of the above code, readers may soon find a problem: JS code in the cumbersome operation, 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 complex, because each Li element needs 1 original style by ID control, such as #level1{... and the interaction 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 that the interaction must be indexed and traversed to implement the style changes.

Solution: Since it is the problem of CSS style settings, then how to design changes, in fact, we can follow the idea here: as little as possible to add new control classes to reduce the subsequent JS operation. For example, the above method is to add a "selected class" For each Li in the solution of demand 2, such as Class level1_selected, class level2_selected ... The ideal solution 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. Some students may not understand how to read here, it doesn't matter. Look at the code below to find out.

Redesign Requirements 2 interaction (checked)

#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 see the next JS in the code is how to change it, the reader can also according to my style of change to write the first JS operation code, whether and I write the same.

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

});

Read the code you, is not feeling as happy as I am, after all, just changed the CSS add Class way, you can make subsequent JS code so concise. So here's a conclusion (mentioned above): Minimize the number of new control classes to reduce the subsequent JS operation.