对于这样的导航栏,点击之后就会改变样式的,应该直接在链接后面的相应标签里面加上相应的样式,而不必使用js效果,因为页面已经跳转了,在当前页面所加的js是没有效果的,这一点谨记,可以节约不少时间,如果对于当前页面hover效果的话,在IE7下面只有a标签有用,对于其他的标签是无效果的。所以在页面添加hover效果时应该使用js,这样的话IE6以下都可以支持!

    

  文字代码使用dl>dt>dd结构,由于职位名次标题使用的是定位,所以不能使用overflow来控制显示还是隐藏,由于overflow为hidden是表示超出内容部分就不显示了。可以使用

直接在后面加上一个class:none。就可以解决这个问题了。在js方面,不能使用常规的轮播来使用,因为第一个和最后一个都是特殊值,应该使用if语句判断当前是第一个还是最后一个的情况:

 1 $(function(){
 2         // var position = 0;
 3         // var posi=0;
 4         // var swich_job = function(){ 5         //     $('.tale_wrap').hide();
 6         //     $('.tale_wrap').eq(posi).show();
 7         //     $('.job_lister').removeClass('job_list_hover');
 8         //     $('.job_lister').eq(posi).addClass('job_list_hover');
 9         //     var posi = (posi+1) % $('.job_lister').size();
10         //
11         // };
12         // $('.right_direction').click(function(){13         //     swich_job();
14         // });
15         // $('.left_direction').click(function(){16         //     posi = (posi-2)%$('.job_lister').size();
17         //     swich_job();
18         // });
19
20     var $taleWrap = $('.tale_wrap');
21     var $jobList = $('ul.job_list>li');
22
23     // 点击左右箭头
24     $('.direction').click(function(e){
25         var $this = $(this);
26         var $currentJob = $('.job_list_hover');
27         var currentIndex = $jobList.index($currentJob); // 当前高亮的节点的index
28         var length = $jobList.length;
29
30         if($this.hasClass('left_direction')){ // 向左
31             if(currentIndex == 0){ // 第一张
32                 $taleWrap.eq(length - 1).show();
33                 $taleWrap.eq(currentIndex).hide();
34
35                 $jobList.eq(length - 1).addClass('job_list_hover').siblings().removeClass('job_list_hover'); // 改变点的状态
36             } else if(currentIndex > 0) { // 不属于第一张
37                 $taleWrap.eq(currentIndex - 1).show();
38                 $taleWrap.eq(currentIndex).hide();
39
40                 $jobList.eq(currentIndex - 1).addClass('job_list_hover').siblings().removeClass('job_list_hover'); // 改变点的状态
41             }
42         } else if($this.hasClass('right_direction')){ // 向右
43             if(currentIndex == length - 1){ // 最后一张
44                 $taleWrap.eq(length - 1).hide();
45                 $taleWrap.eq(0).show();
46
47                 $jobList.eq(0).addClass('job_list_hover').siblings().removeClass('job_list_hover'); // 改变点的状态
48             } else if(currentIndex < length - 1){ // 不属于最后一张
49                 $taleWrap.eq(currentIndex + 1).show();
50                 $taleWrap.eq(currentIndex).hide();
51
52                 $jobList.eq(currentIndex + 1).addClass('job_list_hover').siblings().removeClass('job_list_hover'); // 改变点的状态
53             }
54         }
55     });
56
57     $('.job_lister').mouseenter(function() {
58         $('.job_lister').removeClass('job_list_hover');
59         $(this).addClass('job_list_hover');
60         var position = $('.job_lister').index(this);
61         $(this).parent().parent().find('.tale_wrap').hide();
62         $(this).parent().parent().find('.tale_wrap').eq(position).show();
63     });
64
65
66 });

对于

必需对背景图片定死高度和宽度,不然在服务器端出现重影。并且应用no-repeat;

之前:首次出现北京,第二次移上去的时候出现哈尔滨,但是北京还在。

改动:首次还是北京,第二次移上去的时候出现哈尔滨,北京消失。

 1                <div class="runschool">
 2                     <div class="end beijing">
 3                         <div class="bg_beijing bg_beijing_hover" normal="bg_beijing"></div>
 4                         <p class="bj block">院校:北京工业大学<br/>
 5                             时间:9月24日&nbsp;&nbsp;18:30-20:30<br/>
 6                             地点:信东楼202<br/>
 7                             院校:北京航空航天大学<br/>
 8                             时间:10月13日&nbsp;&nbsp;18:30-20:30<br/>
 9                     </div>
10                     <div class="end haerbin">
11                         <div class="bg_haerbin" normal="bg_haerbin"></div>
12                         <p>院校:哈尔滨工业大学<br/>
13                             时间:10月15日&nbsp;&nbsp;18:30-20:30<br/>
14                             地点:正心楼106<br/>
15                         </p>
16                     </div>
17                     <div class="end nanjing">
18                         <div class="bg_nanjing" normal="bg_nanjing"></div>
19                         <p class="font">院校:南京理工大学(孝陵卫校区)<br/>
20                             时间:10月19日&nbsp;&nbsp;18:30-20:30<br/>
21                         </p>
22                     </div>
23                     <div class="end guangzhou">
24                         <div class="bg_guangzhou" normal="bg_guangzhou"></div>
25                         <p>院校:华南理工大学(大学城校区)<br/>
26                            时间:10月21日&nbsp;&nbsp;18:30-20:30<br/>
27                            地点:大学城校区A4-301
28                            </p>
29                     </div>
30                     <div class="end changsha">
31                         <div class="bg_changsha" normal="bg_changsha"></div>
32                         <p class="font">院校:湖南大学<br/>
33                            时间:10月23日&nbsp;&nbsp;18:30-20:30<br/>
34                         </p>
35                     </div>
36                      <div class="end xian">
37                         <div class="bg_xian" normal="bg_xian"></div>
38                         <p>院校:西安电子科技大学(南校区)<br/>
39                            时间:10月26日&nbsp;&nbsp;18:30-20:30<br/>
40                            地点:新校区大学生活动中心116
41                         </p>
42                     </div>
43                 </div>
44             </div>
45         </div>
46         <i class="y_icon"></i>
47     </div>
48     <script type="text/javascript">
49     (function(){
50         var $normal = $('[normal]');
51
52         $normal.hover(function(){
53            var currentClass = $(this).attr('normal');
54             if(currentClass!='bg_beijing'){
55             $(".bg_beijing").removeClass("bg_beijing_hover");
56             $(".bg_beijing").siblings('p').removeClass('block');
57         }
58            $(this).siblings('p').show();
59            $(this).addClass(currentClass + '_hover');
60         }, function(){
61              var currentClass = $(this).attr('normal')
62             $(this).siblings('p').hide();
63             $(this).removeClass(currentClass + '_hover');
64         });
65     }());
66     </script>

添加一个normal属性,定义一个变量currentClass。在这里体现了变量的重要性。

服务器端与客户端之间存在的问题(代码可以解决):

1、如果在源代码这边更换了图片,也提交了服务器端,但是在客户端会出现显示不出来的情况,这就是由于服务器端的缓存引起的,解决办法,改变图片的命名。

2、如果更改了html,则在html的head部分添加一条:

<meta http-equiv="pragma" Content="no-cache" />

3、如果更改了css样式,则在css后面添加一个版本号,如:

<link rel="stylesheet" type="text/css" href="css/common.css?v=1.0.0">

关于赞同科技项目的收获相关推荐

  1. 项目经理如何修炼驾驭项目的真功夫︱赞同科技原PMO总经理董轶

    赞同科技股份有限公司原PMO总经理董轶受邀为由PMO评论主办的2022第十一届PMO大会(线上会议)演讲嘉宾,演讲议题为"在多项目环境下,项目经理如何修炼驾驭项目的真功夫".大会将 ...

  2. 赞同科技产品开发部诚聘软件工程师

    - 你是否渴望用程序自由的书写思想? - 你是否渴望淋漓尽致地培养并施展自己的才能? - 你是否渴望加入一支志同道合的团队,共同成就一番事业,并最终推动一个行业的进步? 请加入我们,把你的渴望变成现实 ...

  3. Springboot毕设项目大学生科技项目管理系统0zzjj(java+VUE+Mybatis+Maven+Mysql)

    Springboot毕设项目大学生科技项目管理系统0zzjj(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + ...

  4. 成都 软件 功能测试,成都软件项目验收测试 功能符合性测试 科技项目验收测试报告...

    成都功能符合性测试软件项目验收测试 科技项目验收测试报告 功能符合性测试是什么? 功能符合性测试以软件或信息系统的需求说明为依据测试软件产品功能的完备性.正确性以及适合性. 测试项:功能符合性.用户界 ...

  5. java计算机毕业设计科技项目在线评审系统MyBatis+系统+LW文档+源码+调试部署

    java计算机毕业设计科技项目在线评审系统MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计科技项目在线评审系统MyBatis+系统+LW文档+源码+调试部署 本源码技术栈: 项目 ...

  6. 2022年开始了!武汉市企业牵头承担国家科技项目配套补贴申报条件材料及流程

    武汉市企业牵头承担国家科技项目配套补贴申报正在进行中,不要错过了今年的补贴哦,介绍补贴标准.申报条件材料及流程如下. 一.补贴对象 在武汉市行政区域注册的企业,且同时满足以下条件: (一)牵头承担20 ...

  7. 苏州企业申报科技项目的小技巧汇总

    如今企业可申报的科技项目越来越多,然而,很多企业在科技项目申报过程中仍然会出现各种各样的问题,如不熟悉申报程序,导致漏报.错报--明明满足了一些科技项目的申报条件,却始终拿不到这些项目补贴. 于是,小 ...

  8. 500万补贴!武汉市企业牵头承担国家科技项目配套补贴对象标准及申报流程

    武汉市企业牵头承担国家科技项目配套补贴怎样去申报?需要哪些流程和条件?本文小编已为您整理汇编,希望可以帮助到您. 一.武汉市企业牵头承担国家科技项目配套补贴对象 在武汉市行政区域注册的企业,且同时满足 ...

  9. 什么是科技项目验收测试?验收测试报告怎么出具?

    文章来源:专业做软件测试的卓码软件测评 科技项目验收测试是对软件产品的质量进行全面检测和评价,是保障软件质量的一项关键因素. 科技项目验收测试报告验收评审工作遵循客观.公正.事实求是的原则. 申请科技 ...

最新文章

  1. asp.net Web API 身份验证 不记名令牌验证 Bearer Token Authentication 简单实现
  2. java:迭代器Iterator
  3. Linux centos 6.7防火墙打开MySQL 3306端口
  4. [基础题] * 9.(*)设计一个Student接口,以一维数组存储一个班级的学生姓名。
  5. c语言中常用的预处理命令6,C语言的预处理命令
  6. Account detail页面加载的性能分析 - 2017-09-25
  7. Upgrade Oracle GI 11.2.0.4_to_12.1.0.2
  8. 速度堪比Adam,准确率媲美SGD,还能稳定训练GAN:全新优化器成为NeurIPS爆款
  9. 【系统架构设计师】软考高级职称,一次通过,倾尽所有,2016年下半年系统架构设计师考试论文真题(论述软件设计模式技术及应用)
  10. wxpython textctrl_wxpython中Textctrl回车事件无效的解决方法
  11. Python 单元测试
  12. 本质矩阵 基础矩阵 单应矩阵 (1)
  13. Linux下高效实用的grep命令
  14. 时空解析理论的实验检验方法
  15. (小米系统系列五)小米/红米国际版系统刷入小米钱包、小米公交、小米门禁卡
  16. Unable to load library 'xxx': Native library (linux-x86-64/xxx.so) not found in resourc 问题解决
  17. 一个更Swifty核心动画
  18. ROS学习之error解决记录
  19. 车载网络测试 - 车载以太网 - Tester和DUT的IP、MAC、Logical addr设置
  20. 解决dell 15R 双显卡笔记本桌面右键点击反应慢的问题

热门文章

  1. python --Tkinter详解
  2. 1000: 梦里的难题
  3. 介绍一下什么是“云计算”
  4. java NumberPad实现_旺财记账项目-Money.vue组件实现(下)
  5. java jtextfield长度_JTextField限制输入长度的完美解决方案
  6. WordPress下拉菜单失效解决办法
  7. 安卓开发学习日记第三天_新手怪button_莫韵乐的欢乐笔记
  8. 基于VB算法+Picture+Timer控件制作的39种动画效果,类似屏保(完整原程序)
  9. CodeForces - 253C:Text Editor(暴力枚举)
  10. 紫光展锐t610处理器相当于骁龙多少