yzyspy 2010-10-13 21:06
浏览 150
已采纳

自己用JQuery做Tab失败 ？？求帮助

<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>
  • 写回答

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> &lt;/style&gt; </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>$(&quot;ul&quot;).each(function(){ <br> $(this).css(&quot;display&quot;,&quot;none&quot;); <br> $(&quot;#&quot;+obj.name).css(&quot;display&quot;,&quot;block&quot;); <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> &lt;/div&gt; &lt;div id=&quot;content&quot;&gt; &lt;ul id=&quot;a&quot;&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;国际新闻1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;国际新闻2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;国际新闻3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;国际新闻4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul id=&quot;b&quot;&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;娱乐新闻1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;娱乐新闻2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;娱乐新闻3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;娱乐新闻4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul id=&quot;c&quot;&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;体育新闻1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;体育新闻2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;体育新闻3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;体育新闻4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></body> </p> <p></html>[/code]</p>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 stm32开发clion时遇到的编译问题
  • ¥15 lna设计 源简并电感型共源放大器
  • ¥15 如何用Labview在myRIO上做LCD显示？(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用
  • ¥15 C++ yoloV5改写遇到的问题
  • ¥20 win11修改中文用户名路径
  • ¥15 win2012磁盘空间不足,c盘正常，d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程