How to write a tab page with jquery code (chained operation)

Come on! Today, I learned a trick, JS write dozens of lines of the Tab tab jquery write a line, the use of chain-like operation! Here's the code:

<! DOCTYPE html>"en">{padding:0; Margin:0; } ul{List-style-Type:none;        } #ul {height:30px; Margin-bottom:10px;        } #ul li {height:30px; Line-height:30px; padding:015px;        border:1px solid Gray; float: Left; Margin-right:3px;    Cursor:pointer;    } #ul li.current {background: #abcdef;        } #content div{width:300px;        height:200px;        border:1px solid red; Border-Collapse:collapse;    Display:none;    } #content div.php{Display:block; }</style> <script src ='Js.js'></script> <meta charset="UTF-8"> <title>Document</title>"ul"> <liclass=' Current'>php</li> <li>ruby</li> <li>python</li> </ul> <div id="content"> <divclass="PHP">php ... Introduction </div> <divclass="Ruby">ruby ... Introduction </div> <divclass="python">python ... Introduction </div> </div> <script>        $('Li'). Click (function () {//$ (this). CSS (' background ', ' #abcdef '); //$ (this). Siblings (). CSS (' background ', ' white ');$( This). AddClass (' Current'). Siblings (). Removeclass (' Current'). Parent (). Next (). Children (). EQ ($ ( This). Index ()). Show (). siblings (). Hide ();//Add Class//var m = $ (this). html (); //$ ('. ') +m). CSS (' Display ', ' block '). Siblings (). CSS (' Display ', ' none ');//Class Selection Method//$ (' #content div '). EQ ($ (this). Index ()). addclass (' php '). Siblings (). Removeclass (' php ');//Index Selection Method//$ (' #content div '). EQ (This). Index ()). Show (). siblings (). Hide ();        })    </script></body>
Commented out section also has a way to achieve the Association of Li and div changes, "one-line" method is used in the method of the index of Li, I think out of the method with the class selector, first select the text in Li, and then directly to the class selection, The premise is that your div must have a class name.
Another way is to use the content selector:
$ (' #content div contains (m) ') .... This method is used for labeling and HTML () content associated with better flexibility, the code is not written out, you can try it yourself Oh!
How to write a tab page with jquery code (chained operation)