鏈接到內容交換機容器內的錨

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 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傳遞給函數以切換我們的內容！而已！