Home >Web Front-end >JS Tutorial >Implement code_jquery with Juery web tab

Implement code_jquery with Juery web tab

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 18:06:061049browse

First, the front-end code

Copy the code The code is as follows:

Personal information

My Photos

My Blog

My QQ:1511109272

< ;/div> 🎜> The code is as follows:

$(function() {
//Switching of web page tabs
var $menu_li = $("div.tab_menu ul li");

$menu_li.click(function(){ $(this).addClass("selected") //Current

highlighted.siblings().removeClass("selected"); // Remove the highlighting of other peers

var index = $menu_li.index( $(this) ); //Find the index of the child node of

$("div.tab_box > div ") //The DIV with index N is displayed .eq(index).show() .siblings().hide();

})

}) 

Then the CCS style can be set 

Copy the code 

 The code is as follows:

.clear { clear:both; height:0px; overflow:hidden;}
.tab{ width:400px; font-size:12px;}
.tab_menu ul{ padding:0px;margin:0px;}

.tab_menu li{ list-style:none; display:block; float:left; background:#C2CEFE; height:22px; line-height:22px; padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid; } .box{ width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; } .tab_menu ul li. selected{background:#dadada; cursor:pointer; } .hide{ display:none;}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Proficient in Javascript series data types string_javascript skillsNext article：Proficient in Javascript series data types string_javascript skills

See more

Implement code_jquery with Juery web tab

Related articles