Question

我在Bootstrap / JQuery /我自己的CSS之间遇到了一些恼人的问题，请告诉我这是否是一个你知道如何修复的问题。

我正在实现我自己的“滑块”，AJAX调用根据用户的导航将内容加载到页面上。问题出在我的导航栏中。当onhashchange事件发生时，我正在加载正确的内容，从active元素中清除<li>类，并将active类重新添加到相应的<li>元素。

不幸的是，设置active类并没有导致我写的适当的CSS应用，稍微变暗。我意识到，可能会有一百万件事情造成这种情况。但是对活动类进行硬编码可以得到完全合适的结果。我不知道断开连接的位置。我问自己，是否存在妨碍应用CSS的页面加载问题？我不知道。

提前致谢。

HTML ：

...
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="sections nav navbar-nav">
    <li><a href="#call">Call</a></li>
    <li><a href="#police">Police</a></li>
    <li><a href="#charges">Charges</a></li>
    <li><a href="#jail">Jail</a></li>
    <li><a href="#courts">Courts</a></li>
    <li><a href="#resources">Resources</a></li>
  </ul>
  ...
</div>
...

我的CSS ：

.navbar {
    background-color: #231f20;
}

.navbar .sections>li>a:hover {
    background-color: #4f4c4d;
}

    /* Overriding */
.navbar a { color: #DDD !important; }
.navbar a:hover { color: #AAA !important; }
.navbar-nav>.active>a { background-color: #4f4c4d !important; }

我的JS ：

   /* Constants */

var elem = $('.sections li a');
var pages = [];
for(i=0; i<elem.length; i++) {
  //console.log(elem[i])
  pages[i] = elem[i].hash;
}

var first = 0;
var last = pages.length;

...

function loadPage(hash, callback) {
/* Loads the content inside the "#main" element on the
   page found at <url> into the "#main" element of the 
   current page. Then sets the links and buttons 
   accordingly. */

  url = hash.split('#')[1] + '.html'
  $('#main').load(url + "#main", callback);
  setLinks(hash);
}


function setLinks(hash) {


  for (i=0; i<=last; i++) {
    if (pages[i] == hash) {
      page_num = i;
    }
  }

  var previous = page_num - 1;
  var next = page_num + 1;

  ...

  $('.sections li').removeClass('active');
  $('.sections li').eq(page_num).addClass('active');

}


$(document).ready(function() { 
  ...

  $(window).on('hashchange', function() {
    loadPage(window.location.hash);
  });
});

Answer 1

您应该使用函数loadpage中提供的回调功能。你正在进行异步调用，并直接应用css。但是，该页面尚未更新（需要一些时间）。你应该做这样的事情（只有更新的功能）：

function loadPage(hash, callback) {
    /* Loads the content inside the "#main" element on the
       page found at <url> into the "#main" element of the 
       current page. Then sets the links and buttons 
       accordingly. */

    url = hash.split('#')[1] + '.html'
    $('#main').load(url + "#main", callback);
    // setLinks(hash); <-- don't do this, it will be executed to early!
}

$(document).ready(function() { 
...

  $(window).on('hashchange', function() {
    loadPage(window.location.hash, setLinks); // <-- making use of the callback functionality
  });
});

并从loadPage函数本身删除setLinks调用。通过将其作为回调函数传递，它将在$('#main').load完成后执行。

断开添加类和应用CSS之间的连接

1 个答案: