Insert link internal page in accordion title

Question

我希望附加代码的所有功能保持原样，但是我希望每个手风琴的标题在打开手风琴下拉菜单时成为另一个页面的link。每次我尝试我得到的都是手风琴 w/out 成功 link 或相反。

如果您需要更多信息，请告诉我。

TLDR：将 href 附加到标签 "label one"

我目前正在使用附加的代码来解决我的问题 https://jsfiddle.net/11wunqqz/4/

/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #16a085;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}

.blue label {
  background: #2980b9;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #1abc9c;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.blue .tab-content {
  background: #3498db;
}

.tab-content p {
  margin: 1em;
}


/* :checked */

input:checked~.tab-content {
  max-height: 10em;
}


/* Icon */

label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

input[type=checkbox]+label::after {
  content: "+";
}

input[type=radio]+label::after {
  content: "BC";
}

input[type=checkbox]:checked+label::after {
  transform: rotate(315deg);
}

input[type=radio]:checked+label::after {
  transform: rotateX(180deg);
}

<div class="wrapper">
  <div class="tab blue">
    <input id="tab-four" type="radio" name="tabs2">
    <label for="tab-four">Label One</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab blue">
    <input id="tab-five" type="radio" name="tabs2">
    <label for="tab-five">Label Two</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab blue">
    <input id="tab-six" type="radio" name="tabs2">
    <label for="tab-six">Label Three</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
</div>

Answer 1

TLDR: attach a href to the label "label one"

编辑：我看到了你的评论：

inserting the href overruns the accordion function

您没有指定是否要避免 JavaScript，但我的解决方案涉及它。我的解决方案是向您的标签添加一个点击事件。看看我的 fiddle 这里：https://jsfiddle.net/j5L8rhtm/

我运行一个JavaScript页面完成加载和解析后的代码（这很重要，因为我需要访问DOM），包括添加一个click 事件到具有 data-href 属性的所有 label 标签。

它有点像 a href，但它使用 JavaScript 来添加事件并避免覆盖已经绑定到该项目的事件。事实上，我已经使用 addEventListener 方法向 click 事件添加了一个匿名函数。

然后我用window.open函数打开一个新的window。您也可以打开一个新选项卡。 Check here 参数。

有些人可能会说 window.open 应该避免，但是如果你用它在 click 事件中打开一个 window/tab 就可以使用它，因为它是用户触发的动作。 "resistant" 浏览器的弹出窗口限制和 "harder" 弹出窗口阻止程序扩展（我有其中之一，我的 fiddle 代码仍然可以正常工作）。

我不知道你是否有任何 JavaScript 技能，但是使用我的代码 fiddle 你可以在你的 [=13] 上编写并分配 data-href 属性=] 标签。

原文：

我刚刚编辑：

<label for="tab-four">Label One</label>

收件人：

<label for="tab-four"><a href="https://www.google.com">Label One</a></label>

它很管用。我将 "Label One" 包装到具有 href 属性的 a 标签中。您可以在其中放置任何值，例如锚点（无需刷新即可跳转到页面的特定部分）。您还可以指定 target 属性。 See here 获取更多信息。

Insert link internal page in accordion title

Insert link to internal page in accordion title

html

css

accordion

hyperlink