Нажав на ссылку, вы увидите ее в Разном Div на той же странице

Я хотел бы знать, есть ли способ щелкнуть ссылку на навигационном теге Div и отобразить на нем Div Div, как если бы я

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

Из комментариев ниже – ОП заявила следующее:

Я пытаюсь переделать сайт, но мое воображение становится лучше меня. Если у меня есть три ссылки, как дома, об авторе и о нашей миссии. Я хотел бы иметь возможность щелкнуть об авторе, а в теге div main_content показать html-файл aboutauthor.html

Related of "Нажав на ссылку, вы увидите ее в Разном Div на той же странице"

Alt 1: Использование вкладок jquery: см. Демо и код здесь: http://jqueryui.com/demos/tabs/

Alt 2: Скрыть / показать div в том же файле html:

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: загрузка с сервера ondemand:

Чтобы загрузить html в свой главный div, вы должны использовать: http://api.jquery.com/load/. Следуйте примерам на этом сайте. И имейте в виду, что сторона, которую вы загружаете, должна находиться в том же домене, что и у вас есть новая страница.

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> 

вы можете увидеть это в действии здесь