一:tab效果显示 复制代代码如下: 無标题页 <br>html{ font-size :12px;}<br>body{ margin:50px;}<br>div,ul,li{ margin:0;パディング:0;}<br>#tab{幅:200px; margin-top:20px;}<br>#tab li{ float:left;高さ:20ピクセル;行の高さ:20px;ボーダー:1px ソリッド #000;リストスタイル:なし;パディング:3px 6px;}<br>#tab li.on{ 背景:#3CF;}<br>#bd div{ width:198px;ボーダー:1px ソリッド #000;高さ:100ピクセル;テキスト整列:中央; 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>varindex = $("#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 の下のインデックスの div が表示されるので、兄弟を藏(例:$("p:eq(1)") とします。") を選択します。<br>});<br>// $("#links a").mouseover(function() {<br>// varindex = $("#links a").index(this);<br>// $("#tab li").eq(index).trigger("click");<br>// });<br>});<br>< ;/html> 二:Tab效果和動态追加ダウンロード 复制代代码如下: < /title> <br>$(function() {<br>$("#bd>div:not(:first)").hide();<br> $("#tab td").mouseover(function() {<br>varindex = $("#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</a></td>");<br>var links = $("<div><a href='http://www.baidu.com'>sdfsdfsd</a></div>");<br>$("#tab").append(link); //方向idはtab下追加link<br>$("#bd").append(links); //方向idはbd下追加links<br>});<br>});<br> <br>#tab li.on<br>{<br>背景: #3CF;<br>}<br> 百度博客园好123163 < HeaderTemplate><%#Eval("StationName") %> asp:TemplateField>asfa<%#Eval("StationName ")%>azsac<%#Eval("StationName")%>azsac <%#Eval("StationName")%>< asp:BoundField DataField="ビジネス" HeaderText="ビジネス"/> 🎜>< ;/div>