0 
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();
    }
});

<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">
            <p>Some content specific to this section...</p>
        </div>
        <div class="section" id="section2">
            <img src="#" alt="BADGER" />
        </div>
        <div class="section" id="section3">
            <img src="#g" alt="SNAKE" />
        </div>
    </div>

我必须为每个选项卡示例 index.html#section1 ， index.html#section2 创建特定链接

4

4 回答 4

1

尝试这个，

if(window.location.hash)
{
    showSection( window.location.hash);// to get the div id
}

完整代码

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() { // no need for each loop
        $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
            showSection( $(this).attr('href') );
        });
        //});
        if(window.location.hash) // if hash found then load the tab from Hash id
        {
           showSection( window.location.hash);// to get the div id
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});
于 2013-10-28T08:53:56.633 回答
0

这个问题已经问了很多次了，用谷歌搜索应该很容易找到。

 $( "#tabs" ).tabs({
        select: function(event, ui) {                   
            window.location.hash = ui.tab.hash;
        }
    });

在此处回答jQuery UI 选项卡，单击不同选项卡时更新 url

于 2013-10-28T08:52:23.380 回答
0

您可以将每个部分放在具有该特定名称的锚标记内。例如，对于第 1 节，您可以这样做：

<a name="section1">
    <div class='section" id="section1">
        <p> Some content specific to this section...</p>
    </div>
</a>

然后，您可以像这样简单地引用该部分（来自同一页面）：

<a href="#section1">Click me to get to section1!</a>

如果您要尝试从另一个页面（如 ）引用section1（假设是 on ） ，您只需拥有以下锚元素：index.htmlabout.html

<a href="index.html#section1">Clicke me to navigate from about.html to section1 on index.html<a>

此外，您可以尝试使用window.location.hash[所有主流浏览器都支持它]，如下所示：

window.location.hash = 'section1';
于 2013-10-28T08:52:52.077 回答
0

用演示试试这个代码

单击部分标题，页面将滚动到特定部分

http://css-tricks.com/snippets/jquery/smooth-scrolling/

于 2013-10-28T08:53:36.583 回答