jqueryTab效果和动态加载的简单实例_jquery



一：tab效果显示
代码如下:

登录注册

登录

注册

登录内容
注册内容


$(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效果和动态加载
代码如下:

$(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 = $("sdfsdfsd");
$("#tab").append(link); //向id为tab下面追加link
$("#bd").append(links); //向id为bd下面追加links
});
});