基於鏈接填充html容器

我有一個容器，當點擊三個可能的按鈕（事件，新聞和其他）時加載不同的內容的網頁。這是通過在按鈕上使用onclick和一個適當的javascript函數來實現的。我想製作一個鏈接到頁面，該頁面能夠顯示內容，而用戶不必點擊給定的按鈕。基於鏈接填充html容器

換句話說，顯示的默認內容是關於新聞，但是，有些情況下我想推廣一個活動，因此我需要一個鏈接，人們可以點擊（從我的網站外），並自動看到容器與事件內容。我使用，只是爲了清楚起見代碼，如下：

<div style="cursor:pointer;" class="grid-cell grid-33 cell-first bg-grey-light flex-active" id="news_btn"> 
     <div class="cell-content one-line center font-16" style="width: 100%;height: 100%;;padding-top:0"> 
      <a style="display:block;width:100%;height:100%;text-decoration:none;padding-top:15px"onclick="changeTab('news')">News</a> 
     </div> 
    </div> 
    <div style="cursor:pointer;" class="grid-cell grid-33 bg-grey-light" id="eventi_btn"> 
     <div class="cell-content one-line center font-16" style="width: 100%;height: 100%;;padding-top:0"> 
      <a style="display:block;width:100%;height:100%;text-decoration:none;padding-top:15px"onclick="changeTab('eventi')">Eventi</a> 
     </div> 
    </div> 
    <div style="cursor:pointer;" class="grid-cell grid-33 cell-last bg-grey-light" id="cronoregue_btn"> 
     <div class="cell-content one-line center font-16" style="width: 100%;height: 100%;;padding-top:0"> 
      <a style="display:block;width:100%;height:100%;text-decoration:none;padding-top:15px"onclick="changeTab('crono_regue')">Crono Reg Ue</a> 
     </div> 
    </div>

JavaScript函數如下：

function changeTab(displayTab){ 
    if (displayTab == 'news') { 
     document.getElementById("crono_regue").className = "hide"; 
     document.getElementById("eventi").className = "hide"; 
     document.getElementById("news").className = ""; 

     document.getElementById("cronoregue_btn").className = "grid-cell grid-33 bg-grey-light"; 
     document.getElementById("eventi_btn").className = "grid-cell grid-33 bg-grey-light"; 
     document.getElementById("news_btn").className = "cell-first grid-cell grid-33 bg-grey-light flex-active";  
    } 
    if (displayTab == 'eventi') { 
     document.getElementById("crono_regue").className = "hide"; 
     document.getElementById("news").className = "hide"; 
     document.getElementById("eventi").className = ""; 

     document.getElementById("cronoregue_btn").className = "grid-cell grid-33 bg-grey-light"; 
     document.getElementById("news_btn").className = "cell-first grid-cell grid-33 bg-grey-light"; 
     document.getElementById("eventi_btn").className = "grid-cell grid-33 bg-grey-light flex-active"; 
    } 
    if (displayTab == 'crono_regue') { 
     document.getElementById("news").className = "hide"; 
     document.getElementById("eventi").className = "hide"; 
     document.getElementById("crono_regue").className = ""; 

     document.getElementById("cronoregue_btn").className = "grid-cell grid-33 bg-grey-light flex-active"; 
     document.getElementById("news_btn").className = "cell-first grid-cell grid-33 bg-grey-light"; 
     document.getElementById("eventi_btn").className = "grid-cell grid-33 bg-grey-light"; 
    } 
}

我不知道這是否是可以實現的方式我設計了我的頁面，因爲我正在努力尋找解決方案。我知道我給這篇文章的標題可能是通用的，但我發現只用幾個字難以解釋問題。在此先感謝

來源

2014-07-23 miks87

任何你可以包括的JavaScript都會有所幫助，如果可能的話，像jsFiddle或jsBin這樣的工作樣本可以加速這個過程。 –

如何使用錨？我的意思是像'example.com/home＃anchor'。 – afaolek

如何使用'jQuery'？我覺得比純JavaScript更容易做到這一點。 – afaolek

你做鏈接像http://www.example.com#news ......

if(window.location.hash) { 
    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character 
    changeTab(hash); 
}

所以在頁面加載時，JavaScript的中查找hash並把它傳遞給你的函數。

來源

2014-07-23 17:43:16 afaolek

真棒解決方案！非常感謝你 – miks87

歡迎。你可以用[jQuery]（http://jquery.com）來做。有了它，你可以簡化你的'changeTab'功能，並使其更多功能。 – afaolek

基於鏈接填充html容器

回答

相關問題