Question

我有一个带有容器的网页，当点击三个可能的按钮（事件，新闻和其他）时，该容器会加载不同的内容。这可以通过使用onclick按钮和正确的javascript函数来实现。我想制作一个能够在不需要用户点击指定按钮的情况下显示内容的页面链接。

换句话说，显示的默认内容是关于新闻的，但是，有些情况下我想宣传一个事件，因此我需要一个人们可以点击的链接（从我的网站外部）并自动查看容器与事件内容。为了清楚起见，我使用的代码如下：

    <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";
    }
}

我不知道这是否可以按照我设计页面的方式实现，因为我很难找到解决方案。我知道我给帖子的标题可能是通用的，但我发现只用很少的单词来解释问题。提前致谢

Answer 1

您将链接设为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并将其传递给您的函数。

根据链接填充html容器

1 个答案: