Html 选项卡正在地址栏中显示代码

我有以下代码，它在页面的url中显示

#page-1

，

#page-2

，是否有办法将其从url中删除？当选择显示选项卡部分中的内容时，这是一个选项卡菜单

<nav>
<div class="navmenu">         
<div id="profile-nav">
<ul id="profile-navigation" class="nav">
<li><a href="#page-1">About</a></li>
<li><a href="#page-2">Measurements</a></li>
<li><a href="#page-3">Pictures</a></li>
<li><a href="#page-4">Contact</a></li>
</ul>           
</div>
</div>
</nav>

<div class="content" id="page-1">
<h2>Page 1</h2>
<p>Text...</p>
</div>

<div class="content" id="page-2">
<h2>Page 2</h2>
<p>Text...</p>
</div>

<div class="content" id="page-3">
<h2>Page 3</h2>
<p>Text...</p>
</div>

<div class="content" id="page-4">
<h2>Page 4</h2>
<p>Text...</p>
</div>

第1页
文本

第2页
文本

第3页
文本

第4页
文本

之所以将

#page-1

、

#page-2

等内容附加到URL中，是因为ID导航就是这样工作的；您的

链接指向的是DOM中的特定项（在本例中为

div#page-x

），我担心这正是这种链接的工作方式

---

如果您需要在一个DOM中提供所有这些页面，而不需要任何页面重新加载，那么您可以考虑基于JavaScript的解决方案，它将清理URL（当然，它不会影响URL——除非您要求）。尽管使用Javascript导航对于良好的SEO来说有点像雷区。

锚定标记将出现在URL中。您可以尝试使用脚本执行相同的操作。在单击选项卡时调用脚本，为单击的选项卡指定一个类，根据活动类显示选项卡内容。例如：

<ul id="profile-navigation" class="nav">
 <li><a href="javascript:showContent('page-1');">About</a></li>
 <li><a href="javascript:showContent('page-2');">Measurements</a></li>
 <li><a href="javascript:showContent('page-3');">Pictures</a></li>
 <li><a href="javascript:showContent('page-4');">Contact</a></li>
</ul>           

function showContent(id)
{
    jQuery('.content').css('display','none');
    jQuery('#'+id).css('display','block');
}