Я пытаюсь создать ссылку, используя id div, например: index.html#section3
, index.html#section4
index.html#section3
, но он не работает:
<html>
<head>
<title>jQuery Vertical Tabs</title>
<style type="text/css">
ul#verticalNav {
float:left;
clear:left;
width:15%;
}
div#sections {
float:right;
clear:right;
width:80%;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showSection( sectionID ) {
$('div.section').css( 'display', 'none' );
$('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
if (
$('ul#verticalNav li a').length &&
$('div.section').length
) {
$('div.section').css( 'display', 'none' );
$('ul#verticalNav li a').each(function() {
$(this).click(function() {
showSection( $(this).attr('href') );
});
});
$('ul#verticalNav li:first-child a').click();
}
});
</script>
</head>
<body>
<h1>Vertical Navigation Example</h1>
<p>This page demonstrates a simple tabbed jQuery
navigation scheme.</p>
<ul id="verticalNav">
<li><a href="#section1">Section I</a></li>
<li><a href="#section2">Section II</a></li>
<li><a href="#section3">Section III</a></li>
</ul>
<div id="sections">
<div class="section" id="section1">
<h2>Section I</h2>
<p>Some content specific to this section...</p>
</div>
<div class="section" id="section2">
<h2>Section II</h2>
<img src="#" alt="BADGER" />
</div>
<div class="section" id="section3">
<h2>Section III</h2>
<img src="#g" alt="SNAKE" />
</div>
</div>
</body>
</html>
посмотрите на JQuery Tabs http://jqueryui.com/tabs/ для хорошего современного решения. Доступно множество демонстраций.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>