Question

我有以下代码，并在页面的网址中显示#page-1，#page-2，有没有办法从网址中删除它？当select选择显示选项卡部分中的内容时，这是一个选项卡菜单。

<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>

Answer 1

将#page-1，#page-2等附加到网址的原因是因为这是按ID工作的方式;你的<a>链接指向的是DOM中的特定项目（在本例中为div#page-x），这就是我害怕这种链接的工作原理！

如果您需要在一个DOM中提供所有这些页面，而不重新加载任何页面，您可以考虑使用基于Javascript的解决方案来清理URL（好吧，它不会影响URL的URL）所有 - 除非你问它，否则，虽然使用Javascript导航在良好的搜索引擎优化方面是一个雷区。

Answer 2

网址中会有锚标记。您可以尝试使用脚本执行相同的操作。单击选项卡调用脚本，根据活动类为单击的选项卡提供一个类，显示选项卡内容。例如：

<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');
}

Tab正在地址栏中显示代码

2 个答案: