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]);
});

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

链接到内容交换机容器中的锚点

1 个答案: