Home > Developer > JavaScript
Jquery implements tabs with nested functions, and jquery nesting
The tab function is not unfamiliar to everyone. It is nothing more than mouse clicks or suspension to switch related content.
Generally, the option cards you see do not have the nested function. That is to say, a layer of switching effect is completed. This chapter shares a piece of code to implement the tab nesting function, that is, the tabs are nested with the tab function, which can accommodate more content.
The Code is as follows:
<Head> <meta charset = "gb2312"> <title> jquery tab </title> <style type = "text/css"> body, ul, li, div, a {margin: 0px; padding: 0px;} body {margin-top: 10px; margin-left: 15px; }# all {border-left: 1px solid # ccc; border-right: 1px solid # ccc; border-bottom: 1px solid # ccc; width: 255px ;}# title li {float: left; list-style: none; width: 50px; border-top: 2px solid # f60; border-right: 1px solid # ccc; text-align: center; padding-top: 3px;} # title li: last-child {border-right: 1px solid # fff ;}. new {border-bottom: 1px solid # fff; color: # f60 ;}. old {border-bottom: 1px solid # ccc ;}# content {clear: both ;}# content ul {margin-left: 5px; list-style: none; float: left ;}# content li {width: 40px; height: 30px; background-color: # f60; text-align: center; color: # fff ;}. inContent {width: 205px; height: 90px; background-color: # f6c; margin-left: 50px ;} </style> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script> <script type = "text/javascript"> $ (function () {$ ("# title li: first "). addClass ("new "). siblings (). addClass ("old"); $ ("# content div: first "). show (). siblings (). hide (); $ (". inContent: first "). show (). siblings (). hide (); $ ("# title li "). click (function () {$ (this ). addClass ("new "). removeClass ("old "). siblings (). addClass ("old "). removeClass ("new"); $ (". info "). hide (). eq ($ ("# title li "). index (this )). show (); $ (". info div: first-child "). show (). siblings (). hide () ;}); $ (". info li "). mouseover (function () {callback (this).css ("color", "# 20f"); $ (". inContent "). hide (). eq ($ (". info li "). index (this )). show () ;}); $ (". info li "). mouseout (function () {callback (this).css ("color", "# fff ");});}); </script>
The code above implements the tab nesting function. The following describes its implementation process.
I. Implementation Principle:
The principle is actually very simple. In fact, a small tab is set in the large tab. Switch the large tab first and then switch the small tab, I will not discuss it here. For details, refer to the code comments.
Ii. Code comments:
1. $ (function (){}),After the document structure is fully loaded, execute the code in the function.
2. $ ("# title li: first"). addClass ("new"). siblings (). addClass ("old "),By default, a class named new is added to the first li element of the element whose id attribute value is title, and an old class is added to other sibling li elements. That is, by default, the first font of the horizontal tab is red, and others are black.
3. $ ("# content div: first"). show (). siblings (). hide (),Set the first div with id as content to display, and hide other sibling elements.
4. $ (". inContent: first"). show (). siblings (). hide (),Set the first element whose class attribute value is inContent to display and hide the sibling element.
5. $ ("# title li"). click (function (){}),Register the click event handler for the corresponding li element.
6. $ (this). addClass ("new"). removeClass ("old"). siblings (). addClass ("old"). removeClass ("new "),If you click the li element on the top, the class named new will be added to the current li element, the class named old will be deleted, and other sibling elements will be added to the class named old, delete the class named new.
7. $ (". info"). hide (). eq ($ ("# title li"). index (this). show (),First, hide the element whose class name is info, and then display the element of the corresponding index.
8. $ (". info div: first-child"). show (). siblings (). hide (),Set the first child element under the div element under info to display, and hide other elements.
The above is the detailed content of this article, hoping to help you implement the jquery tab.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
