Question

<ul class="slides">
 <div class="page-header" id="page-header">
 
 <!--Begin slide 1 -->
 
    <input type="radio" name="radio-btn" id="img-1" checked />

    <li class="slide-container">

		<div class="slide">
			<video id="video1" width="100%" autoplay loop muted >
			<source src="files/video/1.webm" type="video/webm">			  
		  </video>
        </div>

		<div class="nav">
		
			<label for="img-10" class="prev" onclick="setTimeout(jump, 6000);"></label>
			<label for="img-2"  class="next" onclick="setTimeout(jump2, 6000);" ></label>

		</div>

    </li>
<!-- End slide 1 -->
	
	
 <!--Begin slide 2 -->	
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
<div class="video-container">

        <div class="slide">
		<video id="video2" width="100%"   muted >
          <source src="files/video/2.webm" type="video/webm">	
		  </video>
		  </div>
		  </div>

		<div class="nav">
			<label for="img-1" class="prev"  onclick="setTimeout(jump3, 6000);"></label>
			<label for="img-3" class="next"  onclick="setTimeout(jump4, 6000);"></label>

		</div>		
    </li>
 <!--End slide 2 -->
 
 <!--Begin slide 3 -->
    <input type="radio" name="radio-btn" id="img-3" />

    <li class="slide-container">
<div class="video-container">
        <div class="slide">
		
		<video id="video3" width="100%" >
          <source src="files/video/3.webm" type="video/webm">	
		  </video>
		  </div>
        </div>
		<div class="nav">
			<label for="img-2" class="prev" onclick="setTimeout(jump5, 6000);"></label>
			<label for="img-4" class="next" onclick="setTimeout(jump6, 6000);"></label>
		</div>
    </li>
 <!--End slide 3 -->

</div>
</ul>

我正在使用图片库HTML代码，该代码为每张图片幻灯片提供了一个ID。我想制作一个javascript函数，以便在幻灯片上单击按钮时跳转到特定幻灯片。我知道window.location.href用于重定向到不同的页面，但是有没有办法重定向到页面上某些内容的ID？

Answer 1

您可以在页面中元素的ID之前添加哈希值以重定向到它：

<a href="#foo"></a>

这也适用于Javascript：

window.location.href = '#foo'

Answer 2

其他海报注意到这是可能的重复是正确的，但为了使答案更具体，您将要在页面中使用锚标记。

页面中锚标记的背景阅读： http://www.echoecho.com/htmllinks08.htm http://help.typepad.com/anchor-tags.html

因此，在您的情况下，您的图像标记看起来就像

<a name="#img-1"></a>
<img src="..."/>

然后使用window.location.href进行导航。

window.location.href = '#img-1';

根据您的回复，您似乎有标签标签可以启动此互动，您可以使用onClick处理程序处理此问题：

<label for="img-1" class="prev" onclick="window.location.href='#img-1'"></label>

如果它不是标签标签，但实际上是您提到的导致导航的单选按钮，则需要编写一个稍微复杂的函数来评估是否选中了按钮 - 使用jquery的示例可以在这里找到，在您的情况下，您只需将警报调用修改为window.location.href导航：jquery radio button when checked need an alert

Answer 3

只需使用 location.hash 属性设置网址的锚点部分。

让我们假设网址是'www.abc.com'

location.hash = "anId";

...会将网址设置为“www.abc.com＃anId”

如果页面上有一个id“anId”，浏览器将自动跳转到它。

如何使用javascript重定向到id？

3 个答案: