<html> <head> <title>选项卡</title> <style type="text/css"> ul#a{ display:block; background-color:#99FFFF;} ul#b{ display:none; background-color:#FFCCCC; } ul#c{ display:none; background-color:#FFFF99; } </style> <script src="../jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function change(obj){ alert("dd"); var uls=$("ul"); for(var i=0;i<uls.length;i++){ if(uls.attr("id")!=obj.id) { //或者使用Dom 的className("css样式") uls[i].css("display","none"); }else{ uls[i].css("display","block"); } } </script> </head> <body> <div id="newbox"> <div id="title"> <a href="#a1" id="a" onMouseOver="change(this)">国际新闻</a> <a href="#b1" id="b" onMouseOver="change(this)">娱乐新闻</a> <a href="#c1" id="c" onMouseOver="change(this)">体育新闻</a> </div> <div id="content"> <ul id="a"> <li><a href="">国际新闻1</a></li> <li><a href="">国际新闻2</a></li> <li><a href="">国际新闻3</a></li> <li><a href="">国际新闻4</a></li> </ul> <ul id="b"> <li><a href="">娱乐新闻1</a></li> <li><a href="">娱乐新闻2</a></li> <li><a href="">娱乐新闻3</a></li> <li><a href="">娱乐新闻4</a></li> </ul> <ul id="c"> <li><a href="">体育新闻1</a></li> <li><a href="">体育新闻2</a></li> <li><a href="">体育新闻3</a></li> <li><a href="">体育新闻4</a></li> </ul> </div> </div> </body> </html>
自己用JQuery做Tab失败 ??求帮助
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- 王秋成 2010-10-13 23:46关注
[code="html"]
选项卡
<br> ul#a{ <br> display:block; <br> background-color:#99FFFF;} </p> <p>ul#b{ <br> display:none; <br> background-color:#FFCCCC; <br> } <br> ul#c{ <br> display:none; <br> background-color:#FFFF99; <br> } </p> <pre><code> </style> </code></pre> <p><script src="../jquery-1.4.2.js" type="text/javascript"></script> <br> <script type="text/javascript"> </p> <pre><code> function change(obj){ </code></pre> <p>$("ul").each(function(){ <br> $(this).css("display","none"); <br> $("#"+obj.name).css("display","block"); <br> }); </p> <pre><code>} </code></pre> <p></script> </p> <p></head> <br> <body> <br> <div id="newbox"> <br> <div id="title"> <br> <a href="#a1" name="a" onMouseOver="change(this)">国际新闻</a> <br> <a href="#b1" name="b" onMouseOver="change(this)">娱乐新闻</a> <br> <a href="#c1" name="c" onMouseOver="change(this)">体育新闻</a> </p> <pre><code> </div> <div id="content"> <ul id="a"> <li><a href="">国际新闻1</a></li> <li><a href="">国际新闻2</a></li> <li><a href="">国际新闻3</a></li> <li><a href="">国际新闻4</a></li> </ul> <ul id="b"> <li><a href="">娱乐新闻1</a></li> <li><a href="">娱乐新闻2</a></li> <li><a href="">娱乐新闻3</a></li> <li><a href="">娱乐新闻4</a></li> </ul> <ul id="c"> <li><a href="">体育新闻1</a></li> <li><a href="">体育新闻2</a></li> <li><a href="">体育新闻3</a></li> <li><a href="">体育新闻4</a></li> </ul> </div> </div> </code></pre> <p></body> </p> <p></html>[/code]</p>本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 截图中的mathematics程序转换成matlab
- ¥15 动力学代码报错,维度不匹配
- ¥15 Power query添加列问题
- ¥50 Kubernetes&Fission&Eleasticsearch
- ¥15 有没有帮写代码做实验仿真的
- ¥15 報錯:Person is not mapped,如何解決?
- ¥30 vmware exsi重置后登不上
- ¥15 c++头文件不能识别CDialog
- ¥15 Excel发现不可读取的内容
- ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题