Question

我需要一种方法来自动/以编程方式在WordPress site的主页上移动锚点。我想要移动的锚点是中间的标签。

例如：页面加载，等待指定时间，选项卡2打开，等待指定时间，选项卡3打开，等待指定时间，选项卡4打开，然后不断重复。一旦它结束，我希望它回到开头。理想情况下，如果鼠标停止悬停，但我还没有尝试实现它。

我试图在＆＃34; text＆＃34;中创建一个JavaScript程序。帖子的一部分显示在主页上，但它似乎没有效果。我看到了"Test"提醒，但从未看到"Hello"提醒。

<script type="text/javascript">
function scrollTo(hash) {
    location.hash = "#" + hash;
    alert('Hello');
}
function tabSlider() {
    delay = 2000; //2 second delay
    setTimeout(function() {scrollTo(ert_pane1-1);},delay);
    setTimeout(function() {scrollTo(ert_pane1-2);},delay*2);
    setTimeout(function() {scrollTo(ert_pane1-3);},delay*3);
    setTimeout(function() {scrollTo(ert_pane1-4);},delay*4);
    setTimeout(function() {scrollTo(ert_pane1-0);},delay*5);
    tabSlider();
    alert('Test');
}
window.onload = tabSlider();
//-->
</script>

标签的插件为Easy Responsive Tabs。

感谢brasofilo，这是最终的工作代码：

<script type="text/javascript">
function scrollTo(hash) {
    location.hash = "#" + hash;
    jQuery( "a[href='#" + hash + "']" ).click(); // finds <a> with href==hash and clicks
}
function tabSlider() {
    delay = 3000; //2 second delay
    setTimeout(function() {scrollTo('ert_pane1-1');},delay);
    setTimeout(function() {scrollTo('ert_pane1-2');},delay*2);
    setTimeout(function() {scrollTo('ert_pane1-3');},delay*3);
    setTimeout(function() {scrollTo('ert_pane1-4');},delay*4);
    setTimeout(function() { scrollTo('ert_pane1-0'); tabSlider(); }, delay*5 );
}
window.onload = tabSlider();
//-->
</script>

编辑对于那些想知道我是如何操作悬停的人，我只是使用jQuery来阻止点击：

var hovering = 0;
jQuery ("#primary").hover(function() { hovering = 1; },
                  function() { hovering = 0; });
function scrollTo(hash) {
    if (hovering==1) {
    //Do nothing
    } else {
    location.hash = "#" + hash;
    jQuery( "a[href='#" + hash + "']" ).click(); // finds <a> with href==hash and clicks
    }
}

Answer 1

location.hash只会向网址添加哈希值，但实际上并不会导航到哈希值。

由于您已经在网站上加载jQuery，只需强制点击锚点即可：

function scrollTo(hash) {
    location.hash = "#" + hash;
    jQuery( "a[href='#" + hash + "']" ).click(); // finds <a> with href==hash and clicks
}

您的tabSlider函数有两个问题：

scrollTo(value)需要发送一个字符串，你发送一个不相关的“变量” 如果您有var ert_pane1 = 'hash-value';，则scrollTo(ert_pane1)会起作用因为情况并非如此：scrollTo('ert_pane1')。
对tabSlider()的下一次调用必须在最后一次超时内，这样就会产生所需的循环。

function tabSlider() {
    delay = 2000;
    setTimeout(function() { scrollTo('ert_pane1-1'); }, delay );
    setTimeout(function() { scrollTo('ert_pane1-2'); }, delay*2 );
    setTimeout(function() { scrollTo('ert_pane1-3'); }, delay*3 );
    setTimeout(function() { scrollTo('ert_pane1-4'); }, delay*4 );
    setTimeout(function() { scrollTo('ert_pane1-0'); tabSlider(); }, delay*5 );
}
tabSlider();

自动移动锚点

1 个答案: