jquery's index method implements tab effect_jquery

The tabs are on the left and the details are on the right.

Principle:

Click the list item on the left to display the nth content at [index n] of the list based on the selected list item.

(First, the list and content need to be loaded into the page at one time, and only the first content is displayed, so it is more user-friendly to switch.)

How to get the index of the selected list item in the list:

There is a method in jquery which is index([subject])

$("#ul li").index($("#selected"));

It means first setting the list range (#ul li list), and then returning the index of the $("#selected") element in the list.

After obtaining the index, use $("#detail").hide(); $("#detail").eq(n).show(); to display the details of the same index. (The same goes for option list style switching)

only uses 5 lines.