Изменить href ссылки при клике на таб

274

28 июля 2017, 02:04

Приветствую.

Имеется блок с табами и ссылка для перехода, нужно при клике таба менять href ссылки через jquery. Заранее благодарен!

Код

<div class="block">
    <div class="st-left">
        <div class="st-tabs">
            <span class="active" >TAB1</span>
            <span>TAB2</span>
            <span>TAB3</span>
        </div>
    </div>
    <a class="st-right" href="/test1.html">Еще<span class="fa fa-align-right"></span></a>
</div>

Answer 1

Например вот. При клике на "таб" ссылка меняется.

var link = $(".st-right"); 
$(".st-tabs").on("click", "span", function() { 
  link.attr("href", "http://www.ya.ru/"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
<div class="block"> 
  <div class="st-left"> 
    <div class="st-tabs"> 
      <span class="active">TAB1</span> 
      <span>TAB2</span> 
      <span>TAB3</span> 
    </div> 
  </div> 
  <hr> 
  <a class="st-right" href="/test1.html">Еще<span class="fa fa-align-right"></span></a> 
</div>

Скорей всего, вам потребуется чтоб у каждого "таба", была своя ссылка. В таком случаи можно хранить её в data-атрибуте, и подставлять при клике:

var link = $(".st-right"); 
$(".st-tabs").on("click", "span", function(){ 
		link.attr("href", $(this).data("url")); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
<div class="block"> 
    <div class="st-left"> 
        <div class="st-tabs"> 
            <span class="active" data-url="https://www.ya.ru/">TAB1</span> 
            <span data-url="https://www.google.com/">TAB2</span> 
            <span data-url="https://www.site.ru/">TAB3</span> 
        </div> 
    </div> 
    <hr> 
    <a class="st-right" href="/test1.html">Еще<span class="fa fa-align-right"></span></a> 
</div>