Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script type= "Application/javascript" src= "Js/jquery.min.js" ></script>
<style type= "Text/css" >
*{padding:0;margin:0}
#tab {width:400px; height:400px; Position:absolute;left:50%;top:50%;margin: -200px 0 0-200px;}
. tab_menu{width:300px;height:30px; Margin:auto}
Ul{list-style:none}
UL li{float:left;width:70px; height:30px;margin-right:10px; Color: #ccc; text-align:center;line-height:30px;}
. tab_box{width:300px;height:150px;margin:auto;border:1px dotted Rosybrown;}
. Hide{display:none}
. Selected{background-color:royalblue}
</style>
<script type= "Application/javascript" >
$ (function () {
$ ("ul Li"). Click (function () {
$ (this). AddClass ("selected"). Siblings (). Removeclass ("selected"); //Add highlighting to the current object and its sibling object to delete the highlight style
var index=$ ("ul Li"). index (this); //Gets the current object index
$ (". Tab_box>div")
. EQ (index). Show () //display <li> element corresponding <div> element
. Siblings (). Hide (); //And let other <div> elements hide
});
});
</script>
<body>
<div id= "tab" >
<div class= "Tab_menu" >
<ul>
<li class= "selected" > Events </li>
<li> Entertainment </li>
<li> Politics </li>
</ul>
</div>
<div class= "Tab_box" >
<div> Events </div>
<div class= "Hide" > Entertainment </div>
<div class= "Hide" > Politics </div>
</div>
</div>
</body>
JQuery Refinement Tab
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
