從菜單加載Div，然后單擊
[英]Load a Div from Menu click
問題描述
當用戶單擊導航菜單項（頂部水平）時，我正在使用以下代碼在主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>
2 個解決方案
解決方案1
0 2014-12-09 10:17:09
添加preventDefault：
$("#pia").click(function(event) {
event.preventDefault();
$("#main").load("pia.htm");
});
這將停止超鏈接的正常行為。
解決方案2
0 2014-12-09 14:09:17
有兩種方法：
- 使'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>
在頁面加載時顯示第一個div並隱藏其他頁面，然后單擊菜單項顯示其余
[英]Show first div on page load and hide others and then show the rest on click of the menu items
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.