Вставьте ссылку на внутреннюю страницу в заголовке аккордеона - PullRequest
Новая
       19

Вставьте ссылку на внутреннюю страницу в заголовке аккордеона

0 голосов
/ 10 января 2020

Я бы хотел, чтобы все функции прилагаемого кода оставались такими, как есть, однако я бы хотел, чтобы названия каждого аккордеона были ссылкой на другую страницу при открытии выпадающего списка аккордеона. Каждый раз, когда я пробую, все, что я получаю, это либо аккордеон без удачной ссылки, либо наоборот.

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

TLDR: прикрепите ссылку к метке "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>

1 Ответ

1 голос
/ 10 января 2020

TLDR: прикрепить ссылку к метке «label one»

РЕДАКТИРОВАТЬ: Я видел ваш комментарий:

вставка href переполняет аккордеон function

Вы не указали, хотите ли вы избегать JavaScript, но мое решение включает это. Мое решение заключается в добавлении события клика на ваш ярлык. Посмотрите на мою скрипку: https://jsfiddle.net/j5L8rhtm/

Я запускаю код JavaScript после завершения загрузки страницы и анализа (это очень важно, так как мне требуется доступ к DOM) , который заключается в добавлении события click ко всем тегам label, которые имеют атрибут data-href.

Он действует как a href, но использует JavaScript до add событие и избегайте переопределения событий, уже связанных с этим элементом. Фактически, я использовал метод addEventListener, чтобы добавить анонимную функцию к событию click.

Затем я использую функцию window.open, чтобы открыть новое окно. Вы также можете открыть новую вкладку. Проверьте здесь для аргументов.

Некоторые люди могут сказать, что window.open следует избегать, но если вы используете его для открытия ОДНОГО окна / вкладки в событии click, это нормально использовать его, потому что это пользовательское действие. Он «устойчив» к ограничениям всплывающих окон в браузере и «более жестким» модулям блокировки всплывающих окон (у меня есть одно из них, и мой скриптовый код все еще работает отлично).

Я не знаю, есть ли у вас JavaScript навыки, но с моим кодом в этой скрипке вы можете просто написать и назначить атрибут data-href для ваших label тегов.

ORIGINAL:

Я только что отредактировал: 

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

Кому: 

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

Это просто работает. Я обернул "Label One" в тег a с атрибутом href. Вы можете поместить в нее любое значение, например, привязку (чтобы перейти к определенной c части вашей страницы без обновления). Вы также можете указать атрибут target. См. Здесь для получения дополнительной информации.

...