html - 在 Accordion 标题中插入指向内部页面的链接

Question

我希望附加代码的所有功能都保持原样，但是我希望每个 Accordion 的标题在打开 Accordion 下拉菜单时成为另一个页面的链接。每次我尝试时，我得到的要么是没有成功链接的 Accordion ，要么是相反的方式。

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

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: "\25BC";
}

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 事件>label 具有 data-href 属性的标签。

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

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

有些人可能会说应该避免使用 window.open，但是如果您使用它在 click 事件中打开一个窗口/选项卡，则可以使用它，因为这是用户触发的操作。它“抵抗”浏览器的弹出限制和“更难”的弹出窗口阻止程序扩展(我有其中之一，我的 fiddle 代码仍然可以正常工作)。

我不知道你是否有任何 JavaScript 技能，但是使用我的代码，你可以在你的 label 上编写和分配 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 标签中。您可以在其中放置任何值，例如 anchor (无需刷新即可跳转到页面的特定部分)。您还可以指定 target 属性。 See here了解更多信息。