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

在我的产品页面上，我希望有一个链接，可以将用户带到下面的特定选项卡

每个产品页面上的三个选项卡是：

说明、评论、订单

我已经创建了一个基本链接，显示为：

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

。

下面的选项卡设置如下：

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

选项卡信息

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

当有人打开产品页面时，“说明”选项卡是默认的“打开”选项卡，这很好

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

我搜索了很多地方，当你从另一个页面链接到一个页面上的特定选项卡时，大多数解释都会给出解决方案

我正在使用WordPress作为我的CMS

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

---

谢谢。

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

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

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

示例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>

JS代码

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

---

您在wordpress主题中使用什么库来构建这些选项卡？请张贴相关代码。谢谢您的回复。我的设置基本上和你的一样，但不起作用。当我单击我的链接时，它只会向下滚动到页面底部，而我想要打开的订单选项卡则不会。嗨，上面的代码只会滚动到特定位置，它不会显示或隐藏div，因为我们需要添加js代码，如果你想显示或隐藏，我会添加代码并更新fiddle。非常感谢。当您转到该页面时，所有选项卡都会出现，但“描述”选项卡是“活动”选项卡并处于打开状态，这正是我想要的。但是我希望在页面顶部的简短描述区域中有一个链接，当单击该链接时，会获取用户并打开订单选项卡。这就是我面临的问题。对如果您可以添加必要的JS代码，那将非常有用。谢谢。我已经更新了提琴。请看一下它们，并随时询问。谢谢。实际上，我不想在用户进入该页面时隐藏任何选项卡。是否可以显示所有选项卡，但当用户单击链接将它们直接带到并打开我想要的选项卡时？

.displayNone{
  display:none
}

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