javascript - 将分页文章链接到侧边栏

标签 javascript jquery html css

我的 google fu 目前让我失望,所以我想我应该在这里寻求帮助..

我有一个页面只有一篇文章 (url.com/article/article-headline)。当您使用 jQuery 向下滚动页面时,它会加载下一篇文章并更改 url (url.com/article/next-article-headline)。

我的问题是,我有一个左侧边栏,其中包含所有文章的列表。我想要的是突出显示当前文章。因此,当您向下滚动页面并加载下一篇文章时,下一篇侧边栏文章标题会突出显示等等。

如果您需要我的意思的示例,您可以在 time.com 上看到它的实际效果 http://time.com/4010146/smartphones-dinner/ (向下滚动页面并查看 URL 和侧边栏)

为了进行适当的搜索,我真的很难找到它的名字。我想这类似于 scrollspy 但我不确定。是否存在任何插件?

最佳答案

您需要在侧边栏和主要内容的文章部分添加数据属性。借助它您可以确定文章标题。

然后使用 jQuery 添加一个名为“active”的类,这将确定当前文章是否处于事件状态,并在稍后为侧边栏设置“active”类的样式。

示例:.sidebar-article.active { color: #f00; }

如果您需要一个解决方案,您还需要在 fiddle 的帮助下提供适当的 HTML 结构和 jQuery 代码。因此,我们可以提供其余的代码片段,并且不会损害您当前的代码库。

关于javascript - 将分页文章链接到侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32218742/

相关文章:

javascript - 如果 jQuery 对话框隐藏则调用函数

php - HTML 表单提交的问题

javascript - 如何从 HTML/AJAX 输出 PHP/SQL 结果

javascript - 多个 contenteditable 元素,使用箭头键导航

javascript - 如果启用了 javascript,如何执行 Ajax 请求,否则,请求将通过 POSTBACK?

javascript - 根据图像比例添加CSS类

jquery - 调整 iframe 内容的 jQuery 颜色框大小?

javascript - 序列化 html : placing span elements around selected text while preserving the HTML structure

html - CSS边框,不显示外表边框

javascript - 通过相同的键对 javascript 数组对象进行分组