一：tab效果显示 复制代码 代码如下: 无标题页 <BR>html{ font-size:12px;}<BR>body{ margin:50px;}<BR>div,ul,li{ margin:0; padding:0;}<BR>#tab{ width:200px; margin-top:20px;}<BR>#tab li{ float:left; height:20px; line-height:20px; border:1px solid #000; list-style:none; padding:3px 6px;}<BR>#tab li.on{ background:#3CF;}<BR>#bd div{ width:198px; border:1px solid #000; height:100px; text-align:center; line-height:100px;background:#3CF;}<BR>#links a{ margin-right:10px;}<BR> 登录注册 登录 注册 登录内容 注册内容 <BR>$(function() {<BR>$("#bd>div:not(:first)").hide(); //取id为bd下面第一个div，并且将不是第一个的隐藏起来<BR>$("#tab li").mouseover(function() { //当鼠标移动过id为tab 下面li标签时触发函数<BR>var index = $("#tab li").index(this);//取当前事件时的索引记录在index里面<BR>$(this).addClass("on").siblings().removeClass("on"); //将当前事件上加上样式“on”,并且将兄弟节点的样式全部移除<BR>//siblings()是取到兄弟节<BR>$("#bd>div").eq(index).show().siblings().hide(); //将id为bd下面的第 index个div显示出来，将兄弟隐藏（如：$("p:eq(1)")意思是”选择第二个 <p> 元素“）<BR>});<BR>// $("#links a").mouseover(function() {<BR>// var index = $("#links a").index(this);<BR>// $("#tab li").eq(index).trigger("click");<BR>// });<BR>});<BR> 二：Tab效果和动态加载 复制代码 代码如下: <BR>$(function() {<BR>$("#bd>div:not(:first)").hide();<BR>$("#tab td").mouseover(function() {<BR>var index = $("#tab td").index(this);<BR>$("#bd>div").eq(index).show().siblings().hide();<BR>});<BR>$("#bd a").click(function() {<BR>var link = $("<td><a href='http://www.baidu.com'>百dddd");<BR>var links = $("<div><a href='http://www.baidu.com'>sdfsdfsd ");$("#tab").append(link); //向id为tab下面追加link$("#bd").append(links); //向id为bd下面追加links});}); <BR>#tab li.on<BR>{<BR>background: #3CF;<BR>}<BR> 百度 博客园 好123 163 asfaazsacazsac
