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

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 ");
})
})