单击链接将在相同页面上的不同分部中显示 [英] Clicking a link display it in Different Div on Same Page

问题描述

我想知道是否有一种方法可以点击导航Div标签上的链接，并将其显示在内容Div上，如果我有

 < div id =nav> 
< a href =infoto（div id =content）>链接< / a>< / div> 
< DIV ID =内容>显示的东东< / DIV> 
  

从下面的注释 - OP声明如下：

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

解决方案

Alt 1：使用jquery标签：
请参阅演示和代码： http： //jqueryui.com/demos/tabs/

Alt 2：在同一html文件中隐藏/显示div ： p>

HTML：

 < div id =nav> 
< A HREF =＃内容1>显示内容1< / A> 
< A HREF =＃内容2>显示内容2'; / A> 
<一HREF =＃content3>显示内容第3版; / A> 
< / DIV> 
 
< DIV ID =内容1级=切换的风格=显示： none>显示stuff1< / div> 
< div id =content2class =togglestyle =display：none>显示stuff2< / div> 
< div id =content3class =togglestyle =display：none>显示stuff3< / div> 
  

jQuery：

 code> $（＃nav a）。click（function（e）{
 e.preventDefault（）; 
 $（。toggle）。hide b 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>显示内容1< / a> 
< a href =http：www.test.com/test2.html>显示内容2< / a> 
  

jQuery

  $（＃nav a）。click（function（e）{
 e.preventDefault（）; 
 $（'＃maindiv'）。 （href））; 
}）; 
  

I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had

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

From the comments below - the OP stated the following :

I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html

解决方案

Alt 1: Use jquery tabs: See demo and code here: http://jqueryui.com/demos/tabs/

Alt 2: Hide/show div in same html file:

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

Demo: http://jsfiddle.net/5NEu3/3/

Alt 3: Load from server ondemand:

To load html into your main div you should use: http://api.jquery.com/load/ Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.

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

这篇关于单击链接将在相同页面上的不同分部中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！