The switch effect of one tab implemented by jQuery is also embedded with the switch, jquerytab

Source: Internet
Author: User

The switch effect of one tab implemented by jQuery is also embedded with the switch, jquerytab

General results

The following code imports the jQuery package.

Style:

<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>

Js Code:

<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(){ $(this).css("color","#20f"); $(".inContent").hide().eq($(".info li").index(this)).show(); }); $(".info li").mouseout(function(){ $(this).css("color","#fff"); }); }); </script>

Html structure:

<Div id = "all"> <div id = "title"> <ul> <li> News </li> <li> domestic </li> <li> fashion </li> <li> tourism </li> <li> Technology </li> </ul> </div> <div id = "content"> <div style =" clear: both; "class =" info "> <ul> <li> 01 </li> <li> 02 </li> <li> 03 </li> </ul> <div> <div class = "inContent"> 1aaa check whether you are in the li label or in the label of li if it is 1aaa </div> <div class = "inContent"> 1bbb check whether you are in the li label or some in the label of li. If it is 1bbb </div> <div class = "inContent"> 1ccc check whether you are in the li label in the label, if the label is 1ccc </div> <div class = "info"> <ul> <li> 01 </li> <li> 02 </li> <li> 03 </li> </ul> <div class = "inContent"> 2aaa in the li tag, if it is 1aaa in the label of li </div> <div class = "inContent"> 2bbb, check whether you are in the li tag or in the label of li. if it is 1bbb in the tag </div> <div class = "inContent"> 2ccc, check whether you are in the li tag or some are in the tag of li. If it is 1ccc </div> <div class = "info"> <ul> <li> 01 </li> <li> 02 </li> <li> 03 </li> </ul> <div class = "inContent"> 3aaa check whether you are in the li label or in the label of li. 3aaa </div> <div class = "inContent"> 3bbb check whether you are in the li label or in the label of li if it is 3bbb </div> <div class = "inContent"> 3ccc check whether you are using the li label or some 3ccc in the label of li </div> <div class = "info"> <ul> <li> 01 </li> <li> 02 </li> <li> 03 </li> </ul> <div> <div class = "inContent"> 4aaa check whether you are in the li label or in the label of li if it is 4aaa </div> <div class = "inContent"> 4bbb check whether you are in the li label or in the label of li. If it is 4bbb </div> <div class = "inContent"> 4ccc, check that you are in the li label. or if it is 4ccc in the label of li </div> <div class = "info"> <ul> <li> 01 </ li> <li> 02 </li> <li> 03 </li> </ul> <div class = "inContent"> 5aaa you are in the label is still in the label of li. If it is 5aaa </div> <div class = "inContent"> 5bbb, it means you are in the li label or in the label of li. if the label is 5bbb </div> <div class = "inContent"> 5ccc, check whether you are in the li label or some are in the label of li. If it is 5ccc </div> </div>

How can I change jquery to achieve card tab switching?

The key is where is the content of your tab? Now you only implement the tab effect, and hide the corresponding content.
In addition, you also need to work with the corresponding CSS

A very simple JS Code to implement tab switching

$ ("# Demo li"). each (function (){
$ (This). mouseenter (function (){
$ (This). removeClass (). addClass ("ova2"). siblings (). removeClass (). addClass ("ova1 ");
})
})

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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