如何在特定选项卡处于活动状态时打开链接

Question

I have 3 php files content.php, functions.php and topics.php I want that when a user clicks on an link in topics.php that they get redirected to a page with tab1 open and that on the same link but at different button当他们点击链接时，tab2 是打开的。

我已经尝试过使用 onClick="" 和 jquery 的代码，但这些都没有奏效。

活动选项卡必须反映用户在网站上单击的位置（即用户是单击第一个“代数”链接还是第二个链接）。

链接在topics.php中定义和创建

Answer 1

有一种更简单的方法可以做到这一点，它不需要 JavaScript。 使用:target CSS 选择器。

<div class="tab" id="tab1">
  <h1>This is Tab #1</h1>
</div>

<div class="tab" id="tab2">
  <h1>This is Tab #2</h1>
</div>

在您的 CSS 中，从以下内容开始：

.tab {
  display: none;
}
.tab:target {
  display: block;
}

然后，当您 go 到page.html#tab1时，您将看到第一个选项卡。 或者， page.html#tab2 ，您将看到第二个。

这应该让你开始。 您显然希望设置您的 CSS 规则，以便默认显示其中一个选项卡，因为当页面显示时没有锚片段。 而且，您需要从某个地方链接到这些锚片段。

Answer 2

在您的情况下，要将特定选项卡的链接加载为活动状态，您可以使用 URL Hash 更多：

如果你有这个链接：

pockettutor.ie/algebra/#nav-y1

然后

<script language="javascript" type="text/javascript">
  if(window.location.hash) { // Check if url hash is not empty
      var hash = window.location.hash; // nav-y1
      document.querySelector('[href="'+hash+'"]').click();
  }
</script>

Answer 3

我找到了解决我自己问题的方法：

在 functions.php 我添加了代码：

function wwp_custom_query_vars_filter($vars) {
    $vars[] = 'tab';
    return $vars;
}
add_filter( 'query_vars', 'wwp_custom_query_vars_filter' );

在主题中。php 我添加了：

?var=variable1

至 url

在 content.php 我通过调用添加了条件检查：

get_query_var('var');