单击链接在同一页面上的不同 Div 中显示它答案

【问题标题】：Clicking a link display it in Different Div on Same Page单击链接在同一页面上的不同 Div 中显示它
【发布时间】：2011-12-30 11:29:45
【问题描述】：

我想知道是否有一种方法可以单击导航 Div 标签上的链接并让它显示在内容 Div 上，就像我有一样

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

从下面的 cmets - OP 声明如下：

我正在尝试重做一个网站，但我的想象力越来越好。如果我有三个链接，比如主页、关于作者和关于我们的使命。我希望能够单击关于作者并在 main_content div 标记中显示 html 文件 aboutauthor.html

【问题讨论】：

你的问题有点混乱，你想让链接显示一个隐藏的 div 吗？还是让链接在 div 上附加一些内容？还是别的什么？
我认为，您需要使用 AJAX。
听起来你已经准备好进入美妙的 javascript 世界了。试着阅读一下，然后发布一些你尝试过的东西。这个页面可能是一个好的开始，让你得到一半的答案：http://www.webdesignfromscratch.com/javascript/js101/
@dev - 不，他不需要 ajax。
你想达到什么目的？像这样：jsfiddle.net/5NEu3/2

标签： php javascript css

【解决方案1】：

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

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

【讨论】：

这个答案与我的非常相似，但可能更适合您的应用程序。您说您只需要 3 个部分（主页、关于、作者），这些部分实际上并不需要单独的 HTML 文件。将它们全部包含在一个站点上可能会更好（更快），并且只需隐藏未使用的站点，如 IntoTheVoid 提供的示例。
对不起，我昨晚睡着了，我在日本时区，所以请原谅我没有尝试过，但我有 8 个部分，每次都想这样做。
见上面我的新 alt 1，jquery ui 可能对你有很大帮助！

【解决方案2】：

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

【讨论】：

【解决方案3】：

类似这样的：

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>

【讨论】：

【解决方案4】：

显示一个隐藏的 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

【讨论】：