Fuck！资源文件引用顺序会导致代码或布局异常！

最新推荐文章于 2024-09-09 22:16:15 发布

dimzhai

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量210

点赞数

文章标签：代码布局 javascrpit html

本文链接：https://blog.csdn.net/dimzhai/article/details/45767597

版权

Fuck！资源文件引用顺序会导致代码或布局异常！

评级

隐藏深度：★★☆☆☆

解决难度：★★☆☆☆

发疯程度：★★☆☆☆

解决快感：★★☆☆☆

综合评价：★★☆☆☆

标题

HTML 引用内容：

<script type="text/javascript" src="../static/js/jquery.min.js"></script> 
<script type="text/javascript" src="../static/js/uaredirect-mini.js"></script>
<script type="text/javascript" src="../static/js/ke.common.js"></script> 
<link rel="stylesheet" type="text/css" href="../static/css/ke-common.css">
<link rel="stylesheet" type="text/css" href="../static/css/ke-style.css">
<!--解决方法很简单，把CSS写到js前面去就好了-->

Javascript 脚本内容：

/*顶部导航条的下划线动画*/
var NavLine = {
 init:function(){
  var $default = $(".nav .default");
  if ($default.size() > 0) {
   NavLine.navLiMousemove($default);
  }

  $('.nav li').mouseenter(function() {
   var $currLi = $(this);
   if($default.size()==0){
    $currLi.addClass("default");
    $currLi.addClass("on");
   }
   NavLine.navLiMousemove($currLi);
  });

  $(".nav li").mouseleave(function(){
   var $currLi = $(this);
   var $defaultLi = $(".default");
   NavLine.navLiMousemove($defaultLi);
  });
 },
 navLiMousemove:function(elm){
  elm = $(elm);
  var firstLeft = $(".nav li").first().offset().left;
  var targetLeft = elm.offset().left;
  $(".nav-line").css("width",elm.width());
  $(".nav-line").css("left",targetLeft - firstLeft);
 }
}