Home > Developer > JavaScript

Jquery implements tabs with nested functions, and jquery nesting

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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:

 
    
 
  
  • Tabs TAB/tab of jquery tools
    • 
 
  
  • JQuery Tab effect code Ultimate Edition
    • 
 
  
  • JQuery-based six Tab plug-ins
    • 
 
  
  • JQuery EasyUI API Chinese Document-Tabs TAB/Tab
    • 
 
  
  • Jquery multi-tab effect instance code (attached)
    • 
 
  
  • Small Example of jQuery automatic switch/click switch tab Effect
    • 
 
  
  • Practical Jquery TAB sample code
    • 
 
  
  • Implementation of jquery automatic switch tabs Tab
    • 
 
  
  • Js/jQuery simple implementation of the tab Function
    • 
 
  
  • Simple implementation of jQuery tabs
    •

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery examples with code and demo jquery functions w3schools multiple file upload with progress bar using jquery and php jquery tooltip with arrow jquery image viewer with thumbnails video gallery jquery with slider jquery examples with source code

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More