基于链接填充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容器

回答

相关问题