Question

在我的产品页面上，我想要一个链接，该链接会将用户带到下面的特定标签。

每个产品页面上的三个标签为：Description, Reviews, Order Form。

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

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

下面的标签设置如下：

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

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

当某人打开产品页面时，“描述”选项卡是默认的打开选项卡，可以。

如何创建一个简单的链接，单击该链接即可将用户带到“订单表单”标签？

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

我正在使用WordPress作为CMS。

这样的事情需要Javascript使其起作用吗？如果是这样，那么什么（简单的）代码可以完成此任务？（我不是开发人员。）

谢谢。

Answer 1

我了解的是您在页面中一个接一个的三个div，并且所有这些都可以同时看到。 注意：如果一次只能看到一个div，而另一个则是隐藏的，那么在单击锚点时，您需要显示它，然后滚动到该位置，则需要javascript

在所有div都可见的情况下，我希望这不是您的情况，单击锚点时，您需要滚动到该特定div，在这种情况下，您不需要任何JavaScript，并且您的代码也可以正常工作。

这是我在jsfiddle中制作的演示</ p>

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.最初，每个函数将具有负责隐藏div的类显示noe 并添加了像这样的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')
}

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

1 个答案: