Question

我正在设计一个新的博客网站。在索引页面中，我将显示一个否。博客（比方说10）。主容器将显示博客标题和说明。

我有一个右侧导航栏，显示所有标题（仅标题，而非描述）我想要以下两件事

主容器中显示的标题（在侧面导航栏中）将自动突出显示。
如果我点击任何标题，该页面应自动滚动，以便该博客将显示给用户。

我已经看到这是在很多页面中实现的。有人可以告诉我如何实现这个吗？

我正在使用以下JavaScript / CSS库

JQuery的
Twitter bootstrap3

Answer 1

这部分有一堆jquery解决方案。这是一个：How can I highlight a selected list item with jquery?
我在Boostrap 3.0中成功使用了以下脚本。只要在li：
中向href添加id指示符（hashtag）
```
<li><a href="#profile">PROFILE</a></li>
```

与div的id相同：

<div class="row" id="profile">

此脚本可以使用：

<script>
  $(function() {
    $('ul#nav > li > a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
      || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 200
      }, 2000);
      return false;
      }
    }
   });
  });
</script>

单击导航栏项时在主容器中自动滚动

1 个答案: