jquery tab Interface/Menu tabbed effects

Last Update:2017-01-13 Source: Internet

Author: User

Tags web hosting

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

<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> effect </title>

<body>
Nowadays, there are a lot of websites to use to save space on the content of the tags in the Web page. I've seen a lot of WordPress sites using its categories, articles, reviews and tabbed interfaces, content random posts. This is a good "space saver", and if used correctly, it can improve the usability of your site as well. Right, first of all, we need to have this idea and tabbed interface design structure.

Before we start, if you are a web hosting company, this is a good evaluation-hostgator progress.

My idea:
On the top, the content buttons reside in different DIV elements,
Click on one of the buttons and it shows the relevant content;
Click on the other button, it hides the existing and correct display.
Design structure:

Html
In the case of the doesn ' t load in the figure above, let me explain the design structure again. The button at the top of the Ul#tabmenu label. This is what you click, it will trigger the payload content jquery.

Inside Boxbody, you need to specify 5 div, in the number of DIV will depend on how many items are defined #tabmenu in this case, we have 5, therefre, you need 5 div defined elements. Boxbody.

Page effects the load of the Div's index based on the content. Boxbody. For example, if you click on the. Boxbody (Div's index is 0) the first button (or index 0 star), it will load the first Div.

Therefore, the div arrangement in inch boxbody must be arranged with the buttons in the #tabmenu.

<div class= "box" >

<ul id= "Tabmenu" >
<li class= "Posts selected" ></li> 
<li class= "Comments" ></li>
<li class= "category" ></li>
<li class= "Famous" ></li>
<li class= "Random" ></li>
</ul>

<div class= "Boxtop" ></div>

<div class= "Boxbody" >

<div id= "Posts" class= "show" >
<ul>
<li>post 1</li>
<li>post 2</li>
<li class= "Last" >post 3</li>
</ul>
</div>

<div id= "Comments" >
<ul>
<li>comment 1</li>
<li>comment 2</li>
<li class= "Last" >comment 3</li>
</ul>
</div>

<div id= "category" >
<ul>
<li>category 1</li>
<li>category 2</li>
<li class= "Last" >category 3</li>
</ul>
</div>

<div id= "Famous" >
<ul>
<li>famous Post 1</li>
<li>famous Post 2</li>
<li class= "Last" >famous post 3</li>
</ul>
</div>

<div id= "Random" >
<ul>
<li>random Post 1</li>
<li>random Post 2</li>
<li class= "Last" >random post 3</li>
</ul>
</div>

</div>

<div class= "Boxbottom" ></div>

</div>

CSS Tutorial Code

<style>

A
Color: #ccc;
Text-decoration:none;
}

a:hover {
Color: #ccc;
Text-decoration:none
}

#tabmenu {
margin:0;
padding:0 0 0 15px;
List-style:none;
}

#tabmenu Li {
Float:left;
height:32px;
width:39px;
Cursor:pointer;
Cursor:hand
}

/* This is the button images * *
li.comments {background:url (images/tabcomment.gif) no-repeat 0-32px;}
li.posts {background:url (images/tabstar.gif) no-repeat 0-32px;}
li.category {background:url (images/tabfolder.gif) no-repeat 0-32px;}
li.famous {background:url (images/tabheart.gif) no-repeat 0-32px;}
li.random {background:url (images/tabrandom.gif) no-repeat 0-32px;}

Li.mouseo Tutorial ver {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

. box {
Width:227px
}

. boxtop {
Background:url (images/boxtop.gif) no-repeat;
height:11px;
Clear:both
}

. boxbody {
Background-color: #282828;
}

. boxbottom {
Background:url (images/boxbottom.gif) no-repeat;
height:11px;
}

. boxbody Div {
Display:none;
}

. boxbody Div.show {
Display:block;
}

. boxbody #category a {
Display:block
}

/* Styling for the content*/
. Boxbody Div UL {
margin:0 10px 0 25px;
padding:0;
width:190px;
List-style-image:url (Images/arrow.gif)
}

. boxbody Div Li {
border-bottom:1px dotted #8e8e8e;
PADDING:4PX 0;
Cursor:hand;
Cursor:pointer
}

. Boxbody Div ul Li.last {
Border-bottom:none
}

. boxbody Div Li span {
font-size:8px;
Font-style:italic;
Color: #888;
}

/* IE Hacks * *
*html. boxtop {margin-bottom:-2px;}
*html. Boxbody Div ul {margin-left:10px;padding-left:15px;}

</style>

JS Code

<script type=text/javascript>

$ (document). Ready (function () {

Get all of the Li from the #tabmenu ul
$ (' #tabmenu > Li '). Click (function () {

Perform the actions when it's not selected
if (!$ (this). Hasclass (' selected ')) {

Remove the selected class from all Li
$ (' #tabmenu > Li '). Removeclass (' selected ');

After cleared all of the Li, reassign the class to the selected tab
$ (this). AddClass (' selected ');

Hide all the div. boxbody
$ ('. Boxbody div '). Slideup (' 1500 ');

Look for the right Div index based on the navigation UL index
$ ('. Boxbody div:eq (' + $ (' #tabmenu > Li '). Index (this) + ') '. Slidedown (' 1500 ');

}

}). mouseover (function () {

Add and remove class, personally I dont the "right way" to do it,
If you are have better ideas to toggle it, please comment
$ (this). addclass (' mouseover ');
$ (this). Removeclass (' mouseout ');

}). mouseout (function () {

Add and Remove Class
$ (this). addclass (' mouseout ');
$ (this). Removeclass (' mouseover ');

});

MouseOver with animate effect for category menu list:)
$ ('. Boxbody #category li '). MouseOver (function () {

Change background color and animate the padding
$ (this). CSS (' backgroundcolor ', ' #888 ');
$ (this). Children (). Animate ({paddingleft: "20px"}, {queue:false, duration:300});
}). mouseout (function () {

Change background color and animate the padding
$ (this). CSS (' backgroundcolor ', ');
$ (this). Children (). Animate ({paddingleft: "0"}, {queue:false, duration:300});
});

MouseOver effect for posts, comments, famous posts and random menu list.
$ ('. Boxbody li '). Click (function () {
Window.location = $ (this). Find ("a"). attr ("href");
}). mouseover (function () {
$ (this). CSS (' backgroundcolor ', ' #888 ');
}). mouseout (function () {
$ (this). CSS (' backgroundcolor ', ');
});

});

</script>

At last
You will get a beautiful jquery pagination menu!

However, in the category page, if you use IE browser, the propriety cannot hover over hightlighted it (which is why everyone hates IE browser). If you know what the problem is, please tell:

Last but not least, check the demo or download the source code and use it. Any questions. Please leave your comments:

Support my bookmark this article and share it with your friends: Thank you
</body>

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.

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