Question

我想知道是否有办法能够点击导航Div标签上的链接并将其显示在内容Div上，就像我有

一样

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

根据以下评论 - OP表示如下：

我正在尝试重做网站，但我的想象力正在变得更好。如果我有三个链接，如家，关于作者，关于我们的使命。我希望能够点击关于作者并在main_content div标签中显示关于author.html的html文件

Answer 1

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

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

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

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

Answer 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

中看到它

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

4 个答案: