链接到内容切换容器中的锚点

Question

我的“关于”页面使用 div 内容切换方法（Bill Posters），它允许我将任务、联系人等放在同一个容器中。在我尝试从另一个页面链接到特定选项卡之前，它的效果非常好。例如，我有 '/about/#mission' 或 '/about/#contact' 最终链接到内容切换框的第一个 'about' 选项，而不是正确的选项。我希望用户能够从主页点击“联系我们”并直接转到联系标签。

我尝试并尝试调整 html 和 jquery（甚至尝试了双锚，我很确定这不是一件事），我添加了 cookie 识别（如果用户没有'尚未访问该页面...），并且我已经广泛搜索了论坛。任何想法我做错了什么，或者是否有更好的方法来做到这一点？我猜我让问题变得比必要的复杂得多，但我对编码还很陌生，除其他外，可能没有使用正确的搜索语言。

非常感谢任何帮助！我不喜欢这种特定的内容切换方法，我很乐意尝试其他方法。非常感谢！

萨拉

function switchContent(obj) {

    obj = (!obj) ? 'sub1' : obj;

    var contentDivs =    document.getElementById('container').getElementsByTagName('div');
    for (i=0; i<contentDivs.length; i++) {
        if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') != -1) {
            contentDivs[i].className = 'hide';
        }
    }
    document.getElementById(obj).className = '';

}


<div id="container">

<div id="sub1">content 1</div>
<div id="sub2" class="hide">content 2</div>
<div id="sub3" class="hide">content 3</div>

<div id="navigation">
    <a href="#" class="mininav" onclick="switchContent('sub1');   return false;">link 1</a>
    <a href="#" class="mininav" onclick="switchContent('sub2'); return false;">link 2</a>
    <a href="#" class="mininav" onclick="switchContent('sub3'); return false;">link 3</a>
</div>

Answer 1

只需检查位置字符串中的片段标识符值。根据一些条件参数传递我们要更改的对象。

if(window.location.hash){
    //fragment identifier such as '#mission', or '#about' has been found
    var sub = '',
        hsh = window.location.hash.split('#')[1]; // get string without # sign

    switch(hsh){
        case 'mission' :
            sub = 'sub1';
            break;
        case 'contact' :
            sub = 'sub2';
            break;
    }
    switchContent(sub);
}

在上面，我们检查片段标识符。如果找到，我们构建一个 switch 语句来准备一个字符串。完成切换后，我们将字符串传递给函数，该函数将依次触发内容加载器。

确保此代码在 $(document).ready(function(){ }): 内运行，否则 DOM 元素可能不可用。

注意：我建议更改此设置以构建更友好的关系设计模式。其中fragment identifier 和element containing the markup 共享一些公共字符串，例如数据属性。 <div data-rel="contact" id="sub1">。如果这样做了，那么我们不再需要构建一个我们必须手动分配给变量的 switch 语句。如果您愿意接受更加动态和流畅的方法，我很乐意为您构建一个示例，只需在下方回复即可。

这是一种更流畅的方法。

我们应该建立关系，这样我们才能让事情变得更加理智。让我们看看我们应该如何更改内容 div。

<div class="info" id="mission">content 1</div>
<div class="info" id="about">content 2</div>
<div class="info" id="contact">content 3</div>

您会看到我们修改了ids，因此它们不仅与内部内容有特殊关系，而且与我们尝试使用的片段标识符有特殊关系。这样，我们可以在检查hash 存在的条件语句中引用该信息。我们还添加了一个新类info，这将使我们能够使代码更简洁。

现在，让我们清理一下内容切换器功能。以前，我们使用三元运算符来检查 obj 是否存在，如果不存在，则为其分配一些任意字符串；我们不要那样做。

function switchContent(did){
    $('.info').hide(0); //hide all the elements.
    $('div[id='+did+']').show();  //show only what we want!
}

这就是我们的内容切换器！现在让我们为哈希标签的存在构建我们的条件语句。

$(function(){
    if(window.location.hash){
        switchContent(window.location.hash.split('#')[1]);
    }  
});

我们缩短了代码，使其更加流畅。在上面，我们将条件检查封装在 ready 函数中，以便我们知道元素存在，并且页面将按预期工作。

现在让我们清理锚点，这样即使没有启用 javascript，它们也能正常工作。

<a href="#mission" class="mininav">link 1</a>
<a href="#about" class="mininav">link 2</a>
<a href="#contact" class="mininav">link 3</a>

太好了。现在干净多了。没有凌乱的内联点击函数或随机字符串标识符。让它发挥作用吧。

$('#navigation a').click(function(e){
    e.preventDefault(); //we don't want the default jumping behavior
    switchContent($(this).prop('href').split('#')[1]);
});

简单干净！我们捕获点击事件，停止默认行为，然后将href without the # sign 传递给函数来切换我们的内容！就是这样！