Write jquery tabs plug-ins based on bootstrap environment _jquery

Always want to revision of the home page of the book Display section, the previous display is the use of bootstrap of the traditional collapse, Web pages occupy a large, not beautiful enough, the operation is also more troublesome. So have their own use of jquery to do a book display tabs idea, before also on the internet for a half-day, not very satisfied.

Let's look at my implementation process:

First is the HTML part, the HTML part according to the structure simple, highlights the dry goods the idea to design. tab uses the list to insert hyperlinks in the list, and of course the hyperlinks are only used as buttons, and when clicked on any link, switch to the corresponding tab. The Content section of the tab directly uses Div, the display of a book is arranged in a Div, the following look at the specific code:

<div class= "col-md-8" id= "Indexbooks" > <!--tab section--> 
 

It is known from the code that there are three options for this tab, which is divided into entry, actual combat, Advanced level, click on different tabs, then the type of books will be listed.

Here's a look at the Stylesheet section to see how you can beautify the tabs and the contents of the Book Display section:

<style>
//Tab list style
#booksfilter li
{
padding:5px;//inner margin 5px
list-style-type:none;
Float:left;
padding:0px;
}
Set ' | ' The left and right margins
#booksfilter span
{
margin-left:5px
; margin-right:5px;
}
TAB link Style
#booksfilter a
{
padding:5px;//margin: 5px
text-decoration:none;//without underline
}
/ /tab is selected or the style #booksfilter a.cur when the mouse is moved to the tab
, #booksfilter a:hover
{
//Background color
color:white;//foreground colors
border-radius:5px;//round Corner
}

Code comments are very detailed, of course, you can also modify it to design a more beautiful style. And when the card hits the switch, this part of the interaction will be given to jquery to complete, it needs to set the current click of the tab content to be displayed, and hide the other tabs, and set the current tab button to select, delete the other tabs of the selected state, the following code:

$ (function ()
{
$ (' #booksfilter a '). each (the function (i)
{
$ (this). Click (function () {
$ (this). AddClass (' cur ');
$ (this). Parent (). siblings (). Find (' a '). Removeclass (' cur ');//delete any other option cur class
$ ('. Booklist '). EQ (i). Show ();// Displays this node
$ ('. Booklist '). EQ (i) siblings (). Hide ()//Hidden sibling node
})
;

The above is a small set for you to introduce the bootstrap environment based on the jquery tabs plug-ins, I hope to help you, if you want to learn more content please pay attention to cloud habitat community!