将锚标记定位到同一页面中的 div 标记答案

【问题标题】：Targeting anchor tag to div tag in same page将锚标记定位到同一页面中的 div 标记
【发布时间】：2015-02-11 20:31:03
【问题描述】：

我有带有锚标记的菜单，单击菜单链接时，我想在与标记相同的 div 标记中打开一个新的 jsp 页面。我的jsp文件：

<ul>
      <li><a href="music_details.jsp" target="#div_displayfrom">Music</a></li>
      <li><a href="dance_details.jsp" target="#div_displayfrom">Dance</a></li>
 </ul>

<div class="main-container" id="div_displayfrom">

</div>

请帮助....提前致谢！

【问题讨论】：

可能你可以使用iframe

标签： javascript jquery css jsp

【解决方案1】：

如果你想使用 jQuery，那么你可以这样做：

<ul id='mainTabs'>
  <li><a href="music_details.jsp">Music</a></li>
  <li><a href="dance_details.jsp">Dance</a></li>
</ul>

那么你可以在 jQuery 中做到这一点：

$('#mainTabs a').click(function(e){
    e.preventDefault();
    $('#div_displayfrom').load(this.getAttribute('href'));
});

【讨论】：

谢谢@Jai，您给定的解决方案对我来说效果很好......首先运行jsp页面加载在同一页面上但不在目标div中，但从第二次运行它开始根据需要工作...

【解决方案2】：

试试这个：

使用 .load() 函数将页面内容加载到指定的 div 中。

$('ul > li > a').click(function(){
   $('#div_displayfrom').load($(this).attr('href'));
   return false;
});

【讨论】：

【解决方案3】：

简短的回答是你不能。

您描述的行为是iframe，而不是div。

您可以通过使用 JavaScript (Ajax) 来获取内容然后将获取的 HTML 放入 div 中来伪造它（但您必须考虑样式表、脚本、文档中的相对 URL 将被解析的不同 URL ， ETC）。 jQuery 有一个load 方法来帮助解决这个问题。

【讨论】：

感谢@Quentin 清除我的疑虑...我已使用上述答案中建议的 Jquery 加载方法。

【解决方案4】：

target 属性指定打开链接文档的位置。以下是有效的属性值，

_blank - 在新窗口或选项卡中打开链接的文档

_self - 在被点击的同一框架中打开链接文档（这是默认设置）

_parent - 在父框架中打开链接的文档

_top - 在整个窗口中打开链接的文档 framename 在命名的框架中打开链接的文档

请参阅How do I load an HTML page in a <div> using JavaScript? 以在 div 中加载页面。

【讨论】：

【解决方案5】：

试试这样：

<ul>
 <li><a href="music_details.jsp#div_displayfrom">Music</a></li>
 ....
 </ul>

<div class="main-container" id="div_displayfrom">

【讨论】：

请添加一些关于如何解决问题的解释