Я хотел бы знать, есть ли способ щелкнуть ссылку на навигационном теге 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
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>
вы можете увидеть это в действии здесь