Question

我正在尝试使用div：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>

Answer 1

查看Jquery Tabs http://jqueryui.com/tabs/以获得一个好的现代解决方案。很多演示都是有用的。

使用jQuery创建链接的垂直选项卡

1 个答案: