jquery make Web page tab _jquery

Page tabs make it easier to use a limited number of pages to show more elements, and using jquery to create page tabs is a very simple thing to do. Share a little tips for making a Web page tab today.

◦ Introduces the required libraries
◦ Tab principle
◦ Business Core
◦ Complete Small Example

Introducing the required libraries

This knowledge is very basic, but in order to take care of fresh man, I still write it.

tab principle

tab appears in fact, just a div to get the display of permissions, the other does not show it.
• Web page code

 <div class= "tab" >
  <div class= "Tab_menu" >
    <ul>
      <li class= "selected" > tab 1</ li>
      <li> tab 2</li>
      <li> tab 3</li>
    </ul>
  </div><br ><br><br>
  <div class= "Tab_box" >
    <div> Tab 1: This is the number 1th content area </div>
    < div class= "Hide" > tab 2: This is number 2nd content area </div>
    <div class= "Hide" > Tab 3: This is the 3rd content area </div>
  < /div>
</div>

  add point style element  

 <style>//make UL in the level of the Li Tag arranged ul {display:inline;
    White-space:nowrap;
      Li {margin:3px;
      Float:left;
      background:red;
    This prevents the Li label from appearing line-wrapping display display:inline-block; }. tab_menu {list-style:none/* Remove UL front symbol */margin:0px;//distance from external elements is 0 */padding:0px;/* and internal elements The distance is 0 */width:auto; 
      /* Width is adjusted according to element content/}. tab_box {background-color: #465c71///Background color * * BORDER:1PX #4e667d Solid/* Border * * Color: #dde4ec; /* Text color * * DISPLAY:BLOCK; /* This element will be displayed as a block-level element, preceded by a newline character */line-height:1.35em; * * Line High * * padding:4px 20px; /* Internal filling distance * * text-decoration:none; /* Do not show hyperlink underline * * * WHITE-SPACE:NOWRAP; /* for whitespace in the text, the text will continue on the same line until the <br> label is encountered.
      */}. selected {Background-color:green;
    Display:block;
    } hide {display:none; } </style> 

jquery Control

 <script>
  //Plus mouse click Effect
  $ (function () {
    $ ("ul Li"). Click (function () {
      $ (this). AddClass (" Selected "). Siblings (). Removeclass (" selected ");
      var index = $ ("ul Li"). index (this);
      $ ("Div.tab_box > div"). EQ (index)-show (). siblings (). Hide ();
    })
  }

  Add mouse hover effect
  $ (function () {
    $ ("Div.tab_menu ul li"). Hover (function () {
      $ (this). AddClass ("selected"). Show ();
      Below this can implement the TAB's linkage effect
      var index = $ ("ul Li"). index (this);
      $ ("Div.tab_box > div"). EQ (index). Show (). siblings (). Hide ();
    },function () {
      $ (this). Removeclass (" Selected "). Show ();
      Below this can implement the TAB's linkage effect
      var index = $ ("ul Li"). index (this);
      $ ("Div.tab_box > div"). EQ (index)-show (). siblings (). Hide ();
    })
  }
</script>

Business Core

The key is actually the use of the most basic jquery selector, and then we can dynamically change the elements on the page to achieve the desired effect. This is also a great place for jquery.

Here the more skillful is through the transformation of the UL Li style, to achieve similar to the effect of the navigation bar. We can learn from the future development. This is a very practical little trick.

So that the UL in the LI tag level of
    ul {
      display:inline;
      white-space:nowrap;
    }
    Li {
      margin:3px;
      Float:left;
      background:red;
      Display:inline-block;
    }

Complete small Example

<! DOCTYPE html>  

The effect of the implementation is as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.