黑马程序员技术交流社区

标题: 用JQuery做tab标签切换出现的问题 [打印本页]
作者: 宋兴征    时间: 2013-4-19 09:33
标题: 用JQuery做tab标签切换出现的问题
本帖最后由 宋兴征 于 2013-4-20 07:36 编辑

用JQuery做tab标签切换效果，但是页面刚进来时，标签是错乱的，”学院新闻“在上边，”学院通知“在下边，不是靠在一起的，如图：


然后鼠标移动到“学院通知”的标签，又自己跑到上面去了，如图：

如果这时再点”学院新闻“，就又出现了上面的情况。
css代码：
  1. .mode h3 {   z-index:2; font-size:12px; background:url(images_test/pic.gif) no-repeat; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px; }
  2.                 .mode h3.active { background-position:0 -25px; color:#fff;}
  3.                 #news, #notice { position:relative; top:24px; left:0; width:500px; padding:10px;  border:1px solid #ace; z-index:1;}
  4.                 #notice { display:none;}
复制代码
JQuery代码：
  1. <script type="text/javascript">
  2.     $(function () {
  3.         $('.mode h3').mouseover(function () {
  4.             $('.mode div').hide();
  5.             $(this).siblings('h3').removeClass('active').end()
  6.                                                           .addClass('active').next('div').show();
  7.         });
  8.     })
  9. </script>
复制代码
HTML代码：
  1. <div class="mode" style="margin-top:10px;margin-right:0px;float:left;width:550px;">
  2.             <!-- 默认第一个tab为激活状态 -->
  3.         <h3 class="active">学院新闻</h3>
  4.         <div id="news" >
  5.             <ul style="height:185px;line-height:145%">                          
  6.              <%=DtCms.ActionLabel.Article.ViewTxtList(10, 60, 0, "", "ClassId=1 and IsRed=1 and IsLock=0", "AddTime desc",0)%>      
  7.           </ul>        
  8.         </div>
  9.             <h3>学院通知</h3>
  10.         <div id="notice" >
  11.             <ul style="height:185px;line-height:145%">   
  12.                  <%=DtCms.ActionLabel.Article.ViewTxtList(10, 42, 0, "", "ClassId=44 and IsRed=1 and IsLock=0", "AddTime desc",0)%>
  13.              </ul>
  14.         </div>
  15.    </div>
  16.    <div class="clear"></div>
复制代码
请问是哪里出问题了？  ？
作者: 宋兴征    时间: 2013-4-20 07:36
突然又莫名其妙的正常了，结贴。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2