Question

我差不多完成了这个项目，但是我已经在这个问题上打了一天左右。

大图：我试图创建一个链接，将在选项卡之间跳转并找到一个锚点。

详细说明：我需要创建一个链接，触发隐藏当前div的函数（使用display：none）/显示另一个div（display：block;），然后在页面上转到一个锚点。

我的第一个直觉是：代码：

<a onClick="return toggleTab(6,6);" href="#{anchor_tab_link_name}">{anchor_tab_link_name}</a>

因为onClick应该返回true然后执行锚点。然而它加载但从未进入锚点。

这是toggleTab函数给出一些上下文：

function toggleTab(num,numelems, anchor, opennum,animate) {
    if ($('tabContent'+num).style.display == 'none'){
        for (var i=1;i<=numelems;i++){
            if ((opennum == null) || (opennum != i)){
                var temph = 'tabHeader'+i;
                var h = $(temph);
                if (!h){
                    var h = $('tabHeaderActive');
                    h.id = temph;
                }
                var tempc = 'tabContent'+i;
                var c = $(tempc);
                if(c.style.display != 'none'){
                    if (animate || typeof animate == 'undefined')
                        Effect.toggle(tempc,'appear',{duration:0.4, queue:{scope:'menus', limit: 3}});
                    else
                        toggleDisp(tempc);
                }
            }
        }
        var h = $('tabHeader'+num);
        if (h)
            h.id = 'tabHeaderActive';
        h.blur();
        var c = $('tabContent'+num);
        c.style.marginTop = '2px';
        if (animate || typeof animate == 'undefined'){
            Effect.toggle('tabContent'+num,'appear',{duration:0.4, queue:{scope:'menus', position:'end', limit: 3}});
        }else{
            toggleDisp('tabContent'+num);
        }

    }
}

所以我在编码论坛上发布了这个，一个人告诉我，我的标签代码是在原型中完成的。

我应该“长话短说：不要使用onclick。将数据附加到A标签并自己处理点击事件（使用preventDefault（）或类似事件）来做标签设置的东西，然后当它是完成后，手动将您的位置设置为哈希标记。“

我确实理解他的建议，但我不知道如何实现它，因为我对javascript语法知之甚少。

如果您能提供任何提示或建议，那将是惊人的。

更新：

我尝试像下面这样实施以下解决方案：

链接：

<a id="trap">trap</a>

然后将以下js添加到页面顶部：

<script type="javascript">
document.getElementById("trap").click(function() { // bind click event to link
  tabToggle(6,6);
  var anchor = $(this).attr('href');

  //setTimeout(infoSupport.gotoAnchor,600, anchor);
  jumpToAnchor();

  return false;

});

 //Simple jump to anchor point
function jumpToAnchor(){
     location.href = location.href+"#trap";
}
//Nice little jQuery scroll to id of any element
function scollToId(id){
   window.scrollTo(0,$("#"+id).offset().top);
}

</script>

但不幸的是，它似乎对我没用。当我点击文本时，没有任何反应。

有人注意到任何明显的错误吗？我不习惯使用javascript。

Answer 1

我发现了一个更简单的解决方案：

$(function(){
    jumpToTarget('spot_to_go'); //This is what you put inside your function when the link is clicked.

  function jumpToTarget(target){
    var target_offset = $("#"+target).offset();
    var target_top = target_offset.top;
    $('html, body').animate({scrollTop:target_top}, 500);
}
});

工作演示：

http://jsbin.com/ivure/3/edit

因此，在点击事件中，您可以执行以下操作：

//Untested
$('#trap').click(function(){
  tabToggle(6,6);
  var anchor = $(this).attr('href');
  jumpToTarget(anchor);
  return false;

});

Answer 2

显然我只需要一点点延迟。

我用它作为链接。这是我的首选，因为我批量生成了许多链接。

<a href="javascript:toggleTab(6,6);jumpToAnchor('trap');">trap</a>

然后我用了这个香草javascript

 //Simple jump to anchor point
  function jumpToAnchor(target){
    setTimeout("window.location.hash=target",450);
}

这会加载链接并立即转到该位置。没有急躁或任何事情。

我需要设置display：block on div然后在div中找到一个锚点

2 个答案: