javascript - 如何使用javascript重定向到一个id？

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'