[英]Clicking a link display it in Different Div on Same Page
我想知道是否有一種方法可以單擊導航Div標簽上的鏈接,並將其顯示在內容Div上,就像我有
<div id="nav">
<a href="infoto (div id="content")">a link </a></div>
<div id="content>show the stuff</div>
從以下評論中,OP指出以下內容:
我正在嘗試重做一個網站,但我的困惑正在使我變得更好。 如果我有三個鏈接,例如首頁,作者和我們的使命。 我希望能夠單擊有關author的信息,並在main_content div標簽中顯示html文件aboutauthor.html。
替代1:使用jquery標簽:在此處查看演示和代碼: http : //jqueryui.com/demos/tabs/
Alt 2:在同一個html文件中隱藏/顯示div:
HTML:
<div id="nav">
<a href="#content1">Show content 1</a>
<a href="#content2">Show content 2</a>
<a href="#content3">Show content 3</a>
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery的:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
演示: http : //jsfiddle.net/5NEu3/3/
替代3:從服務器按需加載:
要將html加載到您的主div中,您應該使用: http : //api.jquery.com/load/遵循該站點上的示例。 並且請注意,您正在加載的html端必須與托管新頁面的域位於同一域中。
HTML
<a href="http:www.test.com/test1.html">Show content 1</a>
<a href="http:www.test.com/test2.html">Show content 2</a>
jQuery的
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
使用jQuery,您可以執行以下操作。
這將打開網站<a href="example.html">
並在您單擊它時將其放在<div id="content">
,然后禁用更改整個網站。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
<a href="somepage.html">Some page</a>
<a href="someotherpage.html">Some other page</a>
<a href="smypage.html">My page</a>
</div>
<div id="content">
show the stuff
</div>
像這樣:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
<a href="path-to-non-js-browsers-and-search-engines.html" onClick="setContent('content','foo');">a link </a>
顯示一個隱藏的div(我想這就是您想要的)
javascript(使用jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
HTML
<a href="javascript: void(0)" id="showdiv">Show the Div</a>
<div id="hiddendiv" style="display:none;">Content here</div>
你可以在這里看到它的作用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.