Блог

Главная - Вопросы по программированию - Тег привязки на вкладке не перенаправляет

Тег привязки на вкладке не перенаправляет

#html #css

#HTML #css

Вопрос:

Мне нужно добавить гиперссылку на каждую вкладку. После его добавления и нажатия на вкладку страница не перенаправляется. Любая помощь будет оценена.

 .tabset input[type=radio]{position:absolute;left:-200vw}.tabset .tab-panel{display:none}.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5){display:block}body{font:16px/1.5em Overpass,"Open Sans",Helvetica,sans-serif;color:#333;font-weight:300}.tabset label{position:relative;display:inline-block;padding:15px 15px 25px;border:1px solid transparent;border-bottom:0;cursor:pointer;font-weight:600}.tabset label::after{content:"";position:absolute;left:15px;bottom:10px;width:22px;height:4px;background:#8d8d8d}.tabset input:focus label,.tabset label:hover{color:#06c}.tabset input:checked label::after,.tabset input:focus label::after,.tabset label:hover::after{background:#06c}.tabset input:checked label{border-color:#ccc;border-bottom:1px solid #fff;margin-bottom:-1px}.tab-panel{padding:30px 0;border-top:1px solid #ccc}*,:after,:before{box-sizing:border-box}body{padding:30px}.tabset{max-width:65em}  
 <div class="tabset">
  <a href="link1.com"><input type="radio" name="tabset" id="tab1" aria-controls="id1" checked>
  <label for="tab1">Tab 1</label></a> 
  <a href="link2.com"><input type="radio" name="tabset" id="tab2" aria-controls="id2">
  <label for="tab2">Tab 2</label></a>
  <a href="link3.com"><input type="radio" name="tabset" id="tab3" aria-controls="id3">
    <label for="tab3">Tab 3</label>  </a>
</div>

Комментарии:

1. каждый щелчок добавляет window.href=»» в jquery

Ответ №1:

Рабочая демонстрация в codepen 

 $('.tabset a').click(function() {
    window.location = $(this).attr("href");
});  
 .tabset input[type=radio]{position:absolute;left:-200vw}.tabset .tab-panel{display:none}.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5){display:block}body{font:16px/1.5em Overpass,"Open Sans",Helvetica,sans-serif;color:#333;font-weight:300}.tabset label{position:relative;display:inline-block;padding:15px 15px 25px;border:1px solid transparent;border-bottom:0;cursor:pointer;font-weight:600}.tabset label::after{content:"";position:absolute;left:15px;bottom:10px;width:22px;height:4px;background:#8d8d8d}.tabset input:focus label,.tabset label:hover{color:#06c}.tabset input:checked label::after,.tabset input:focus label::after,.tabset label:hover::after{background:#06c}.tabset input:checked label{border-color:#ccc;border-bottom:1px solid #fff;margin-bottom:-1px}.tab-panel{padding:30px 0;border-top:1px solid #ccc}*,:after,:before{box-sizing:border-box}body{padding:30px}.tabset{max-width:65em}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabset">
  <a href="link1.com"><input type="radio" name="tabset" id="tab1" aria-controls="id1" checked>
  <label for="tab1">Tab 1</label></a> 
  <a href="link2.com"><input type="radio" name="tabset" id="tab2" aria-controls="id2">
  <label for="tab2">Tab 2</label></a>
  <a href="link3.com"><input type="radio" name="tabset" id="tab3" aria-controls="id3">
    <label for="tab3">Tab 3</label>  </a>
</div>

Ответ №2:

Вы могли бы избавиться от входных элементов и просто оставить метку внутри тега a. Это сработало бы. Нет смысла использовать ввод, если вы хотите перенаправить пользователя куда-то еще