我正在尝试使用像这样的 div id 创建链接:index.html#section3、index.html#section4 但它不起作用:
<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 选项卡 http://jqueryui.com/tabs/一个好的现代解决方案。提供大量演示帮助。
关于javascript - 使用 jQuery 创建链接的垂直选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19582711/