Question

我正在尝试使用Slider Revolutions选项卡重定向到页面。按钮（选项卡）具有以下结构：

pip install <path/to/package>.whl

按钮之间的差异由 <div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div> 参数决定。 0，1，2，...

我尝试了这段代码，但无法通过自定义ID弄清楚如何获取元素。

data-liindex

我无法更改按钮代码。它是由Slider Revolution生成的，因此我现在不能向其添加任何参数。

Answer 1

如果要选择具有data-属性的元素，可以执行以下操作：

document.querySelector("[data-liindex='1']");

或者您要按ID选择元素，可以将ID添加到要选择的标签中：

<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>

document.querySelector('#1')

Answer 2

简化了该演示的HTML。这有帮助吗？（注意：为演示注释掉了location.href）

let arrayUrl = [
  "www.google.com",
  "www.bing.com",
  "www.yahoo.com"
];

document.addEventListener('DOMContentLoaded', function() {
  // Add Click Listeners
  Array.from(document.getElementsByClassName('tp-tab')).forEach(el => {
     el.addEventListener('click', function(event){
        console.log(`${event.target} - ${event.target.dataset.liindex}`);
        let url = arrayUrl[ event.target.dataset.liindex ];
        console.log(url);
        // location.href = url;
     });
  });

});

<div data-liindex="0" data-liref="rs-12" class="tp-tab">ARMENIA
</div>

<div data-liindex="1" data-liref="rs-12" class="tp-tab">Canada
</div>

<div data-liindex="2" data-liref="rs-12" class="tp-tab">Europe
</div>

Answer 3

此代码完成了工作。需要插入当前滑块的“设置”中，而不是分别插入幻灯片中。

jQuery(document).ready(function ($) {
    $('body').on('click', '.tp-tab', function () {
        switch($(this).attr("data-liindex")) {
            case "1":
            window.location.href = "https://google.com/";
        break;
            case "2":
            window.location.href = "https://blizzard.com/";
        break;
            default:
        break;
        }
    });
});

如何从具有特定属性值的按钮重定向URL？

3 个答案: