从菜单加载一个 div 点击答案

【问题标题】：Load a Div from Menu click从菜单加载一个 div 点击
【发布时间】：2014-12-09 10:14:01
【问题描述】：

当用户单击导航菜单项（顶部水平）时，我正在使用以下代码在我的主 div 中加载页面：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#pia").click(function(){
        $("#main").load("pia.htm");
    });	
});
</script>

<body itemscope itemtype="http://schema.org/SomeProducts">
	<div class="myContainer">
		 <div class="menuIframe">
                <nav>
                    <ul>
                      <li><a href="#"><b>Products</b> <img src="down_arrow.jpg"/></a>
                        <ul>
                            <li><a id="pia" href="#">Panel Instruments & Accessories</a></li>										   
                            <li><a id="stc" href="#">Sequence Timers & Controllers</a></li>
                        </ul>
                      </li>
                    </ul>
                </nav>
          </div>
	      <div id ="main" class="mainIframe">
		     <img src="13.jpg"/>
	      </div>
     </div>
</body>

但是，当我单击菜单项时，页面加载不起作用。想知道我做错了什么？谢谢你的帮助！

【问题讨论】：

控制台是否有任何错误？ pia.htm 是否在同一目录中？就像下面的答案一样，你想阻止默认，所以不遵循链接。
您的代码中存在跨域错误。请检查控制台并验证..

标签： javascript jquery html

【解决方案1】：

添加preventDefault：

$("#pia").click(function(event) {
    event.preventDefault();
    $("#main").load("pia.htm");
});

这将停止超链接的正常行为。

【讨论】：

【解决方案2】：

有两种方法：

制作“href 属性”javascript:;。 <a href="javascript:;">.
使用 event.preventDefault();点击功能

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#pia").on('click', function(e){
            $("#main").load("pia.htm");
        });	
});
</script>

<body itemscope itemtype="http://schema.org/SomeProducts">
	<div class="myContainer">
		 <div class="menuIframe">
                <nav>
                    <ul>
                      <li><a href="javascript:;"><b>Products</b> <img src="down_arrow.jpg"/></a>
                        <ul>
                            <!-- make href attribute value javascript:; -->
                            <li><a id="pia" href="javascript:;">Panel Instruments & Accessories</a></li>										   
                            <li><a id="stc" href="javascript:;">Sequence Timers & Controllers</a></li>
                        </ul>
                      </li>
                    </ul>
                </nav>
          </div>
	      <div id ="main" class="mainIframe">
		     <img src="13.jpg"/>
	      </div>
     </div>
</body>

【讨论】：