在div中改变位置的链接

时间:2013-12-10 10:57:01

标签: html css

我的页面由两个彼此相邻的div组成。

说左边的div是一本包含不同章节的书。

我希望我在右边div中的链接移动div中的内容,使点击的章节位于顶部(基本上向下滚动到那一章。

对于我可能缺少一个简单的答案,

任何帮助都会很棒。

3 个答案:

答案 0 :(得分:1)

试试这个:

<div id="text">
    <h1 id="chapterone">Chapter one</h1>
    <p>The text of chapter 1</p>
    <h1 id="chaptertwo">Chapter two</h1>
    <p>The text of chapter 2</p>
    <h1 id="chapterthree">Chapter three</h1>
    <p>The text of chapter 3</p>
</div>
<div id="links">
    <a href="#chapterone">Chapter one</a>
    <a href="#chaptertwo">Chapter two</a>
    <a href="#chapterthree">Chapter three</a>
</div>

如果您使用的是iFrame,请查看jQuery ScrollTo

答案 1 :(得分:0)

实现这一目标的最简单方法是使用href。这只有在您使用HTML构建“书籍”且它不是图像或PDF或诸如此类的情况下才有效。

给每章的标题添加一个唯一的ID,如“ch1”,“c2”等

然后设置href链接第1章

<div id="left">
    <h1 id="ch1">
    <h2 id="ch2">
    #etc
 </div>
 <div id="right">
    <a href="#ch1">Chapter 1</a>
    <a href = "#ch2">Chapter 2</a>
    #etc
 </div>

请注意,只有“书”是HTML时才有效。如果它是iframed in或是一个图像,那么请查看jQuery插件Scrollto,它允许您为要滚动的每个元素设置滚动高度(以像素为单位)。

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

答案 2 :(得分:0)

您需要使用href并使其有效。章节标题的hrefid应该相同。这样它就会导航到特定的标题。

<div> <!-- for links-->
<a href="#firstChapter">FirstChapter </a>
<a href="#secondChapter">Second Chapter </a>
<a href="#lastChapter">Last Chapter </a>
</div>
<div> <!-- for Chapters -->
<h1 id="firstChapter"> Chapter 1</h1>
<p>Content of chapter   </p>
<h1 id="secondChapter"> Chapter 2</h1>
<p>Content of chapter   </p>
<h1 id="lastChapter"> Chapter 10</h1>
<p>Content of chapter   </p>
</div>