Tab页签切换

js之tab页签切换效果

现在web网站,很多地都需要用到tab页签。

 

  示例:

$(document).ready(function(){

var curIndex;

var $lis = $(".active-hd li");

var $divs = $(".active-bd div");

// 为每一个tab页签li绑定click事件

$lis.on("click",function(){

curIndex = $(this).index();

$(this).addClass("selected").siblings().removeClass("selected");

$divs.eq(index).show().siblings().hide();

});

});

转发来自: 微笑的mvp_lin

时间: 2024-08-09 06:35:14

Tab页签切换的相关文章

bootStrap中Tab页签切换

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile&

tab页签切换----bootstrap

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile&

实现多页签切换效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实现多页签切换效果</title>    <script src="jquery-1.11.3.js"></script>    <style>        * {margin: 0; pad

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

jquery tag页签切换

? $(document).ready(function () {     var tag=$(".tags");     tag.mouseover(function(){         $(this).addClass("tagOn").siblings().removeClass("tagOn");         var index =  tag.index(this);         $("#tagsBody")

tab页签

<div class="fl" id="newsBox"> <div class="tab1 grayBar"> <ul id="newsNav"> <li class="tab1_1 selected" index="0"> <h2> <a href="WebPage/NewsList.aspx?Categor

bootstrap tab页签插件

基于bootstrap.js <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <m

idea tab页签颜色不明显,自定义颜色解决。

配置上自己喜欢的颜色apply即可

值得分享的Bootstrap Ace模板实现菜单和Tab页效果(转)

Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.com/preview/WB0B30DGR Ace模板功能介绍地址:http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html 1.菜单效果 由于Ace是基于Bootstrap的,所以首先需要引用jquery和bootstrap