javascript - 链接到同一页面上的特定选项卡

Question

在我的产品页面上，我想要一个链接，将用户带到下面的特定选项卡。

每个产品页面上的三个选项卡是：Description, Reviews, Order Form。

我创建了基本链接，显示为：

<a href="#tab-name">ORDER</a>.

下面的选项卡设置如下：

<div id="tab-name">tab info</div>

像上面这样的简单链接不起作用。

当有人打开产品页面时，Description 选项卡是默认打开的选项卡，这很好。

如何创建一个简单的链接，单击该链接会将用户带到“订单”选项卡？

当您从另一页链接到一个页面上的特定选项卡时，我已经在很多地方进行了搜索，并且大多数解释都显示了解决方案。

我使用 WordPress 作为我的 CMS。

像这样的东西需要Javascript来使它工作吗？如果是这样，什么（简单）代码可以做到这一点？（我不是开发人员。）

谢谢你。

标签： javascripthtmlwordpresshyperlinktabs

Answer 1

我的理解是您在页面中一个接一个地有三个 div，并且所有这些都同时可见。 注意：如果一次只有一个 div 是可见的，而另一个是隐藏的，并且单击锚点时，您需要显示它，然后滚动到该位置，在这种情况下，您将需要 javascript

我希望这不是你的情况，所有的 div 都是可见的，点击锚点你需要滚动到那个特定的 div，在这种情况下你不需要任何 javascript，你的代码应该可以工作。

这是我在 jsfiddle 中制作的工作演示

http://jsfiddle.net/vickykumarui/n2wzksdg/

示例 HTML 代码是

<a href = "#div1">Go to div 1</a>
<a href = "#div-2">Go to div 2</a>
<a href = "#div3">Go to div 3</a>
<a href = "#div4">Go to div 4</a>


<div id="div1">
<h4>  somed ummy content div1</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div-2">
<h4>  somed ummy content div-2</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div3">

<h4>  somed ummy content div3</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>


<div id="div4">

<h4>  somed ummy content div4</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>

现在，当您在 jsfiddle 中运行上述代码时，您会观察到单击锚页面时滚动到相应的 div，但单击第四个锚页面时没有滚动到 div4，这是因为 div4 位于页面底部并且没有空间滚动到下方。希望能帮助到你

上面更新了最初隐藏 div2、div3、div4 的小提琴，点击锚标签时，它将显示相应的 div 并滚动到该位置。现在更改的代码是

HTML 代码：与之前代码的变化是 1. 最初每个函数都会有类显示 noe，它负责隐藏 div 并添加这样的 onclick 函数转到 div 2 这个 js 中的函数负责显示相应 html 的 div onclick

<a href = "#div1">Go to div 1</a>
<a onclick = "showDiv('div-2')"
href = "#div-2">Go to div 2</a>
<a onclick = "showDiv('div3')" href = "#div3">Go to div 3</a>
<a onclick = "showDiv('div4')" href = "#div4">Go to div 4</a>


<div id="div1">
<h4>  somed ummy content div1</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div-2" class = "displayNone">
<h4>  somed ummy content div-2</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>
<div id="div3" class = "displayNone">

<h4>  somed ummy content div3</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>


<div id="div4" class = "displayNone">

<h4>  somed ummy content div4</h4>
<p> somed ummy content</p>
<p>   somed ummy content</p>
    <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
  <p>   somed ummy content </p>
</div>

CSS 代码

.displayNone{
  display:none
}

JS代码

var showDiv = function(id){
var element = document.getElementById(id);
element.classList.remove('displayNone')
}