Question

嗨我有简单的单页网站＃section。我正在使用＃来隐藏和显示部分。

例如; someurl / index.html中/的 #sectionOne 有一个div＆＃34; sectionOne＆＃34; id，所以我可以显示相关部分。

我的问题是有办法防止或取代＆＃34; /＆＃34;网址中的路径字符与＃类似;

someurl / index.html / sectionOne - ＆gt; someurl / index.html中/的 #sectionOne

因为它当然给出了404。我尝试过卸载，窗口负载，车身负载，但这些并没有解决我的问题。

这是一个简单的例子

＆＃13;

$(document).ready(function() {
    window.onload = function(event) {
        var hash = "about";
        $("section").hide();
        $("#" + hash).show();
    };

    $(".nav").click(function() {
        console.log("CLICK");
        var hash = $(this).attr('href').substring(1);
        console.log(hash);
        $("section").hide();
        $("#" + hash).show();
    });
});

＆＃13;

section {display: none;}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<ul>
    <li><a class="nav" href="#about">ABOUT</a></li>
    <li><a class="nav" href="#services">SERVICES</a></li>
    <li><a class="nav" href="#contact">CONTACT</a></li>
</ul>

<section id="about">
    <h1>ABOUT</h1>
    <p>About section</p>
</section>

<section id="services">
    <h1>SERVICES</h1>
    <p>Services section</p>
</section>

<section id="contact">
    <h1>CONTACT</h1>
    <p>Contact section</p>
</section>

＆＃13;

Answer 1

如果我理解正确，可以在这里使用code伪类：

<ul>
  <li><a class="nav" href="#about">ABOUT</a>
  </li>
  <li><a class="nav" href="#services">SERVICES</a>
  </li>
  <li><a class="nav" href="#contact">CONTACT</a>
  </li>
</ul>

<section id="about">
  <h1>ABOUT</h1>
  <p>About section</p>
</section>

<section id="services">
  <h1>SERVICES</h1>
  <p>Services section</p>
</section>

<section id="contact">
  <h1>CONTACT</h1>
  <p>Contact section</p>
</section>

关于阻止用户使用window.onbeforeunload导航（让它成为任何东西），我相信没有简单的方法可以从客户端单独完成。

我们可以使用eventListener事件并让对话框显示，以根据用户是否需要来保持用户。

我看到的另一个选择是使用target。

＃url部分隐藏和显示

1 个答案: