Question

我有一组标签，如果有人将其粘贴到地址栏中，我需要能够让每个标签的网址显示正确/有效标签。

脚本：

$(function() { 
    $('.tabs span').click(function(){
        switch_tabs($(this));
        return false;
    }); 
    switch_tabs($('.defaulttab'));
});

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs span').removeClass("selected");
    var id = obj.attr("rel");
    $('#'+id).show();
    obj.addClass("selected");
}

HTML：

<ul class="tabs">
    <li><a href="#a"><span rel="a" class="defaulttab">A</span></a></li>
    <li><a href="#b"><span rel="b">B</span></a></li>
    <li><a href="#c"><span rel="c">C</span></a></li>
    <li><a href="#d"><span rel="d">D</span></a></li>
    <li><a href="#e"><span rel="e">E</span></a></li>
</ul>
<div class="tab-content" id="a">content</div>
<div class="tab-content" id="b">content</div>
<div class="tab-content" id="c">content</div>
<div class="tab-content" id="d">content</div>
<div class="tab-content" id="e">content</div>

因此，如果有人在浏览器中粘贴“ http://www.domain.com/aboutus/page#c ”，则浏览器会转到该页面并标签C < / strong>处于活动状态但页面没有跳下来。

这有意义吗？

非常感谢你们提供任何帮助。

Answer 1

您无法避免这种情况，但您可以使用window.scrollTo滚动回页面顶部来解决此问题：

setTimeout(function() {
  if(location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);

Answer 2

我不确定你能不能改变它。 AFAIK，浏览器在JavaScript停止之前进行跳转。我想我可能错了。

作为替代方案，您可以为网址提供不存在的锚名称（例如“http://www.domain.com/aboutus/page#tab_c”）。 JavaScript将删除tab_部分，然后显示相应的选项卡。

Answer 3

我已经使用我的javascript：http://www.starcraft-source.com/tv/#stream-2

完成了这项工作

    //assuming `#tab1` is your hash, `tab1` will be shown
    if (parent.location.hash.length > 0) {
          showTab(parent.location.hash);
    }

还需要关联您的标签，例如href="tab1"

以下是我如何使用它......

Spire.Tv = function () {
    return {
        init: function () {
            if (parent.location.hash.length > 0) {
                this.loadStream(parent.location.hash.split('-')[1]);
            }

            $('.stream').bind('click', function (e) {
                Spire.Tv.loadStream($(e.currentTarget).attr('id'));
            });

            $('#rightbar-full a.stream').bind('click', function (e) {
                Spire.Tv.loadStream($(e.currentTarget).attr('id'));
            });
        },
        loadStream: function (id) {
            $.ajax({
                type: 'post',
                url: webRoot + "/lib/ajax/site/tv/getStream.php",
                data: {
                    id: id
                },
                dataType: 'json',
                success: function (data) {
                    $('#screen').html(data.screen);
                    parent.location.hash = 'stream-'+data.id;
                }
            });
        }
    }
}();

注意我如何使用：parent.location.hash = 'stream-'+data.id;

控制页面上的哈希值

Answer 4

尝试为锚点添加名称：

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_bookmark

Something like <a name="C4">Chapter 4</a>

根据您的代码：

<li><a href="#c" name="c"><span rel="c">C</span></a></li>

jQuery：带有URL而没有'page jump'的标签

4 个答案: