时间戳

首页 > 解决方案 > 在手风琴标题中插入指向内部页面的链接

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

问题描述

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

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

TLDR：将href附加到标签“标签一”

我目前正在使用附加的代码来解决我的问题 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>

标签： htmlcsshyperlinkaccordion

解决方案

TLDR：将href附加到标签“标签一”

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

插入 href 会超出手风琴功能

您没有指定是否要避免使用 JavaScript，但我的解决方案涉及到它。我的解决方案是在您的标签上添加一个点击事件。看看我的小提琴：https ://jsfiddle.net/j5L8rhtm/

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

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

然后我使用该window.open功能打开一个新窗口。您也可以打开一个新选项卡。检查这里的论点。

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

我不知道您是否有任何 JavaScript 技能，但是使用我在那个小提琴中的代码，您可以编写并分配标签data-href上的属性。label

原来的：

我刚刚编辑过：

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

至：

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

它只是工作。我将“标签一”包装到a带有该href属性的标签中。您可以在其中放置任何值，例如锚点（无需刷新即可跳转到页面的特定部分）。您还可以指定一个target属性。请参阅此处了解更多信息。

推荐阅读