單擊一個鏈接將其顯示在同一頁上的不同Div中

-1

我想知道是否有方法能夠點擊導航Div標籤上的鏈接並將其顯示在內容Div上，如果我有單擊一個鏈接將其顯示在同一頁上的不同Div中

<div id="nav"> 
<a href="infoto (div id="content")">a link </a></div> 
<div id="content>show the stuff</div>

從下面的意見 - 在OP說明如下：

我想重做一個網站，但我imagagination是讓我的好。如果我有三個鏈接，比如家，作者和我們的使命。我希望能夠點擊關於作者和在main_content div標籤顯示HTML文件aboutauthor.html

來源

2011-11-16 daddycardona

你的問題有點混亂，你想鏈接顯示一個隱藏的div？或有鏈接追加到div的東西？或者是其他東西？ – Gordnfreeman

我想，你需要使用AJAX。 – Dev

聽起來像你準備跳入JavaScript的美妙世界。嘗試閱讀一下，併發布一些你嘗試過的東西。此頁面可能是一個很好的開始，並可讓您中途回答您的問題：[http://www.webdesignfromscratch.com/javascript/js101/](http://www.webdesignfromscratch.com/javascript/js101/） – Dave

替換1：使用jQuery標籤： 在這裏看到的演示和代碼：http://jqueryui.com/demos/tabs/

替換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/

Alt鍵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")); 
});

來源

2011-11-16 14:27:18

這個答案和我的非常相似，但可能更適合你的應用。你說你只想要3個部分（家庭，關於，作者），這些應該不需要每個單獨的HTML文件。將它們全部包含在一個網站中可能會更好（並且更快），並且只需隱藏那些未被使用的，就像IntoTheVoid提供的示例一樣。 –

對不起，我在你最後一個晚上睡着了，我在日本時區，所以原諒我沒有嘗試過，但我有8個部分，並希望每次都這樣做。 – daddycardona

看到我上面的新alt 1，jquery ui可能會幫助你很多！ – 2011-11-17 07:55:07

事情是這樣的：

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>

來源

2011-11-16 14:13:29 CodeCaster

來顯示隱藏的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>

你可以看到它在行動here

來源

2011-11-16 14:17:13 Gordnfreeman

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

來源

2011-11-16 14:28:36

單擊一個鏈接將其顯示在同一頁上的不同Div中

回答

相關問題