Simple implementation of jQuery tabs

Simple implementation of jQuery tabs

This article mainly introduces the simple implementation of the jQuery tab. If you need it, you can refer to it for help.

JQuery implements the tab function. First, build the interface.

 

The navigation header tab_menu and the content tab_box are available.

 

The effect is that, after clicking, the corresponding content is displayed, and other content is hidden.

 

At the same time, to display the selected status, add a background for the selected item to show the difference.

 

This time, I wrote the code first, first looking at the html section:

 

The Code is as follows:

<Div class = "tab">

<Div class = "tab_menu">

<Ul>

<Li class = "selected"> current events </li>

<Li> sports </li>

<Li> entertainment </li>

</Ul>

</Div>

<Div class = "tab_box">

<Div> current events </div>

<Div class = "hide"> sports </div>

<Div class = "hide"> entertainment </div>

</Div>

</Div>

 

In html, a large div is required, which contains two sub-div, one as the navigation header tab_menu, and the other as the content body tab_box. Css code is used to layout html content.

 

Css section:

 

The Code is as follows:

*{

Margin: 0;

Padding: 0;

}

. Tab {

Width: 240px;

Margin: 50px;

/* Border: 1px solid ;*/

}

. Tab_menu {

Clear: both;

}

. Tab_menu li {

Float: left; // float the left of the navigation Header

Text-align: center; // center the text

List-style: none; // remove the markup symbol

Background: # F1F1F1; // sets the Default background color.

Border: 1px solid #898989; // you can specify the border color.

Margin-right: 4px; // the distance between each li is 4px.

Cursor: pointer; // After the mouse is over, a small hand icon appears.

Padding: 1px 6px; // controls the internal distance of li.

Border-bottom: none;

 

}

. Tab_menu li. hover {

Background: # DFDFDF;

}

. Tab_menu li. selected {// Add background and color to the selected options

Color: # FFF;

Background: #6D84B4;

}

. Tab_box {

Clear: both; // clear the effect of float

Height: 100px; // set the height to 100px.

Border: 1px solid #898989; // set the border style of the content body

}

. Hide {// hide the content div to be hidden

Display: none;

}

 

After the layout is complete, perform the jQuery action:

The Code is as follows:

<Script type = 'text/javascript '>

$ (Function (){

// 1. When you click it, change the css attribute, remove the previous selected option, and add the new selected option.

// 2. Hide the previous div layer and display the corresponding div Layer

// Register the click event for li in the navigation bar

Var $ div_li = $ (". tab_menu ul li ");

$ Div_li.click (function (){

$ (This). addClass ('selected'). siblings (). removeClass ('selected ');

// Var index = $ div_li.index (this );

// $ ("Div. tab_box> div"). eq (index). show (). siblings (). hide ();

Var text = $ (this). text ();

If (text = 'date ')

{

$ ('. Tab_box div: contains ("")'). removeClass ('hide '). siblings (). addClass ('hide ');

}

If (text = 'sport ')

{

$ ('. Tab_box div: contains ("")'). removeClass ('hide '). siblings (). addClass ('hide ');

}

If (text = 'play ')

{

$ ('. Tab_box div: contains ("Entertainment")'). removeClass ('hide '). siblings (). addClass ('hide ');

}

}). Hover (function (){

$ (This). addClass ("hover ");

}, Function (){

$ (This). removeClass ("hover ");

});

});

</Script>

 

This is the jQuery code I wrote. My idea is to add the selected style when you click the tab and remove the selected style of the brother tab.

 

Again, how can we trigger the hiding and display of the content in the corresponding tab_box?

 

I found that they have the corresponding content, that is, the option body corresponding to the option Header "practical" is also "practical ", the option header is "Sports" and the corresponding option is also "Sports.

 

I just want to get the content of the Option header and make a judgment. When it is a different value, different effects will be triggered.

 

The effect is achieved, but the vulnerability is obvious, because not all option cards correspond to titles and content bodies.

 

Let's look at the following code:

The Code is as follows:

<Script type = "text/javascript">

// <! [CDATA [

$ (Function (){

Var $ div_li = $ ("div. tab_menu ul li ");

$ Div_li.click (function (){

$ (This). addClass ("selected") // highlight the current <li> element

. Siblings (). removeClass ("selected"); // remove the highlight of <li> elements of other peers

Var index = $ div_li.index (this); // obtain the index of the currently clicked <li> element in all li elements.

$ ("Div. tab_box> div") // select a subnode. If you do not select a subnode, an error occurs. If there is a div inside

. Eq (index). show () // display the <div> element corresponding to the <li> element

. Siblings (). hide (); // hide <div> elements of several other peers

})

})

//]>

</Script>

 

The processing here is especially clever. It gets the li index and processes the option body. It cleverly utilizes a hidden correspondence, that is, the index value.

 

In this way, even if the option header does not correspond to the option body content, the interaction effect can be achieved.

 

Through this exercise, I think it is good to think about it first. Only by discovering differences in thinking can we discover deficiencies and gaps. Sometimes you may even think better!