Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

添加preventDefault：

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

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

Answer 2

有两种方式：

制作＆＃39; href属性＆＃39; javascript:;。 <a href="javascript:;">。
使用event.preventDefault（）;点击功能

＆＃13;

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

＆＃13;

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

＆＃13;

从菜单中加载Div，单击

2 个答案: