The status code of the News list and the News list.

The status code of the News list and the News list.

Example of the News list effect code for tab switch:
The news list that uses Tab switching applies to many websites. Of course, the advantage is self-evident. The smaller space can accommodate more news content, and the classification effect can be easily organized, the following is an example of code. The following describes the implementation process.
The Code is as follows:

 

<! DOCTYPE html> 
 
The above Code meets our requirements. Click the top tab to switch the news list. The following describes the implementation process.
I. Code comments:
1. $ (function () {}). When the final structure is fully loaded, run the code in the function.
2. $ (". chang "). each (function (index) {}), obtains the element set whose class attribute value is chang, and executes the function with every DOM element in the set as the context, index is the index position of the current DOM element in the set.
3. $ (this). click (function () {}), register the click event handler for the current element, that is, register the click event handler for each title.
4.((this).css ("background-color", "# E02D29") to set the background color of the currently clicked title.
5. $ (this ). siblings ("div" ).css ("background-color", "# fff"), set the background color of its brother div element to # fff, that is, the background color of only the elements that can be clicked is "," # E02D29.
6. $ (". main_content ul: eq ("+ index + ")"). show (). siblings ("ul "). hide (), the index of the currently clicked title corresponds to the index of the ul element in the News list to be displayed, therefore, this statement is to display and process the news list indexed by the clicked title, and then hide its sibling ul element (that is, another news list ul ).
Ii. Related reading:
1. For details about the each () function, refer to jQuery. each () method 1.
2. For details about this, refer to the section "this usage in javascript.
3. For details about click events, see click events in jQuery.
4. For details about the css () function, see the css () method section of jQuery.
5. For the siblings () function, refer to the siblings () method section of jQuery.
6. For details about the eq selector, see the section eq () selector in jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 11753.
For more information, see: http://www.softwhy.com/jquery/