A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 宋兴征 中级黑马   /  2013-4-19 09:33  /  1777 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 宋兴征 于 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>
复制代码
请问是哪里出问题了?  ?

评分

参与人数 1技术分 +1 收起 理由
苏波 + 1

查看全部评分

1 个回复

倒序浏览
突然又莫名其妙的正常了,结贴。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马