Как изменить js что бы можно было перейти при нажатии по кнопке, а не по ссылке?

Question

Есть блок с табами и js, как изменить что-бы можно было сделать переход не по ссылке, а с помощью кнопки, button, нужно изменить немного js но как это сделать?

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>

Answer 1

//считываем url у активного таба и открываем
$(".st-right").click(function(){  
  const url = $('.st-tabs span.active').data("url");  
  window.open(url);
})

//назначаем класс active табу по клику
$(".st-tabs").on("click", "span", function(){
      $(".st-tabs span.active").removeClass('active');
      $(this).addClass('active');
});

<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>
    <button class="st-right" >Открыть<span class="fa fa-align-right"></span></button>
</div>

Answer 2

Для чего вы добавляете в код лишние сущности (js), используете элементы (span) "не семантически"? Почему нельзя поставить ссылки на место span, если они должны вести себя как ссылки. (вспомнилась поговорка про утку)

Внешний вид? Так через css можно из самой закомплексованой ссылки сделать довольно раскрепощенную кнопку :)

БЛОГ НА HUSL

Как изменить js что бы можно было перейти при нажатии по кнопке, а не по ссылке?

Ответы (2 шт):