Question

我在单页网站上有一个相当基本的导航标签，显示/隐藏div。但是，当我刷新页面时，它会返回登陆“页面”div，而不是停留在当前选项卡上。我使用以下JS在标签之间切换，如果可能的话我想继续使用这种方法：

var links = document.getElementById('navs').getElementsByTagName('a');

for(var i = 0, link; link = links[i]; i++) {
    link.onclick = showContent;

    // Hide content divs by default
    var contentdiv = getContentDiv(link)
    if (contentdiv == null){
        continue;
    }
    contentdiv.style.display = 'none';
}

// Show the first content div
if(links.length > 0) showContent.apply(links[0]);
var current;

function showContent() {

    // hide old content
   if(current) current.style.display = 'none';

   current = getContentDiv(this);
   if(!current) return true;

   current.style.display = 'inline-block';

   return true;

}

function getContentDiv(link) {

    var linkTo = link.getAttribute('href');
    console.log(linkTo);

    // Make sure the link is meant to go to a div
    if(linkTo.substring(0, 2) != '#!') return;
    linkTo = linkTo.substring(2);
    return document.getElementById(linkTo);

}

我知道它因为登陆div而刷新 if(links.length > 0) showContent.apply(links[0]); 但是，我希望使用此方法并将链接迭代编号存储在名为current_link的变量中，然后才能调用if(links.length > 0) showContent.apply(links[current_link]);甚至if(links.length > 0) showContent.apply(current_link);

我尝试了几种方法，但最终只保存了导航栏中的第一个或最后一个标签。页面也刷新为默认div，但url保持不变。 EX。即使网页显示http://example.com/#!tab1

，网址仍为http://example.com/#!home

这是html：

<nav class="navbar navbar-fixed-top" id= "navs" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <div class="navbar-brand"> 
                        <a id="logo" href="#!home"><img id="logo-pic" src="images/name.png" alt="" width="50%" height="auto"></a>
                    </div>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="navbar" id="navbar-collapse-1">
                        <ul class="nav navbar-right navbar-nav">
                            <a href="#!home"></a>
                            <li class="dropdown">
                                <a href="#!tab1">tab1</a>
                            </li>
                            <li>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">tab2</a>
                                        <ul class="dropdown-menu dropdown-menu-right pull-center">
                                          <li><a href="#!tab21">tab21</a></li>
                                          <li><a href="#!tab22">tab22</a></li>
                                        </ul>
                            </li>
                            <li>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">tab3</a>
                                        <ul class="dropdown-menu dropdown-menu-right pull-center">
                                          <li><a href="images/about/Resume2016.pdf" target="_blank">resume</a></li>
                                          <li><a href="#!tab31">tab31</a></li>
                                          <li><a href="#!tab32">tab32</a></li>
                                        </ul>

                            </li>
                            <li>
                                <a href="#!tab4">tab4</a>
                            </li>
                            <li>
                                <a href="#!tab5">tab5</a>
                            </li>
                        </ul>
                </div>
            </div>
        <!-- /.container -->
</nav>

Answer 1

保持页面状态的最佳方法是利用网址历史记录。

E.g。当用户点击标签时，而不是仅仅进行导航：

创建一个hashchange事件处理程序

window.onhashchange = () => { ... };

或：

window.addEventListener('hashchange', () => ...);

所以你可以这样做：

const navigate = () => open_tab(location.hash.substr(1)); // get rid of the '#'
window.addEventListener('hashchange', navigate);

您还希望在页面加载时导航：

navigate();

现在，当用户点击标签或其他内容时，请更改页面位置的哈希值：

location.hash = "tab1";

这是一项额外的工作，但好处是巨大的：

刷新页面按预期工作
如果用户为该页面添加了书签，则会将该状态标记为UI
正向和向后导航现在可以按预期工作。

在刷新JS上显示最后一个活动div

1 个答案: