1

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

Имеется блок с табами и ссылка для перехода, нужно при клике таба менять 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>

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.