jquery Tab效果、动态加载的示例代码
本文导语: 本节内容： jquery实现的Tab效果，可动态加载。 例一：tab效果 代码示例: jquery Tab效果 - www. html{ font-size:12px;} body{ margin:50px;} div,ul,li{ margin:0; padding:0;} #tab{ width:200px; margin-top:20px;} #tab li{ float:left; height:20px; line-height:20p...
本节内容：
jquery实现的Tab效果，可动态加载。
例一：tab效果
jquery Tab效果 - www.
html{ font-size:12px;}
body{ margin:50px;}
div,ul,li{ margin:0; padding:0;}
#tab{ width:200px; margin-top:20px;}
#tab li{ float:left; height:20px; line-height:20px; border:1px solid #000; list-style:none; padding:3px 6px;}
#tab li.on{ background:#3CF;}
#bd div{ width:198px; border:1px solid #000; height:100px; text-align:center; line-height:100px;background:#3CF;}
#links a{ margin-right:10px;}
登录注册
- 登录
- 注册
$(function() {
$("#bd>div:not(:first)").hide(); //取id为bd下面第一个div，并且将不是第一个的隐藏起来
$("#tab li").mouseover(function() { //当鼠标移动过id为tab 下面li标签时触发函数
var index = $("#tab li").index(this);//取当前事件时的索引记录在index里面
$(this).addClass("on").siblings().removeClass("on"); //将当前事件上加上样式“on”,并且将兄弟节点的样式全部移除
//siblings()是取到兄弟节
$("#bd>div").eq(index).show().siblings().hide(); //将id为bd下面的第 index个div显示出来，将兄弟隐藏（如：$("p:eq(1)")意思是”选择第二个
元素“）
});
// $("#links a").mouseover(function() {
// var index = $("#links a").index(this);
// $("#tab li").eq(index).trigger("click");
// });
});
二：Tab效果和动态加载
jquery实现的Tab效果 - www.
$(function() {
$("#bd>div:not(:first)").hide();
$("#tab td").mouseover(function() {
var index = $("#tab td").index(this);
$("#bd>div").eq(index).show().siblings().hide();
});
$("#bd a").click(function() {
var link = $("百dddd");
var links = $("
$("#tab").append(link); //向id为tab下面追加link
$("#bd").append(links); //向id为bd下面追加links
});
});
#tab li.on
{
background: #3CF;
}
百度
博客园
好123
脚本学堂
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。