Question

有一个带有3 div的pageA（考虑）。我也有另一页的链接。当用户点击链接时，他们必须到达pageA中的第3个div。怎么做？

HTML：（pageA.html中）

            <div id="mws-navigation">
                <ul id="link">
                    <li class="" data-related="a" id="a1"><a href="#a"><i class="icon-book"></i>A</a></li>
                    <li data-related="b" class="" id="b1"><a href="#b"><i class="icon-search"></i>B</a></li>
                  <li data-related="c" class="" id="c1"><a href="#c"><i class="icon-calendar"></i>C</a></li>    
                </ul>
            </div>         
        <!-- Main Container Start -->
        <div id="mws-container" class="clearfix">
            <!-- Inner Container Start -->
                <div id="a" class="tab">
                    aaaa
                </div>
                <div id="b" class="tab"> 
                    bbbb
                </div>
                <div id="c" class="tab"> 
                   cccc
                </div>
        </div>

页面B.html：

<a href="PageA.html#c">vvv</a>// this link will be in other page(to reach C)

//我必须在herf=""中提供什么才能达到特定的div

JQuery的：

$(function()
    {

            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#a').show();
            document.getElementById('a1').className='active';
            $('#link li').click(function(e){
            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#'+$(this).attr('data-related')).show();
            e.preventDefault();
});
    });

在我的代码中，所有div都被隐藏，除了那个被选中的div 时间。所以不需要滚动。

需要帮助。

Answer 1

您需要将页面主体设置为比浏览器视口稍长一些，以启用滚动并使用以下jquery功能：

$("body, html").animate({ 
            scrollTop: $('#mws-container').offset().top 
        }, 600);

请参阅jsfiddle

Answer 2

如果目的地必须在href中，您可以使用Anchor标记执行此操作：

参见Jsfiddle Here

line<br>行只是为了让它滚动，所以它比窗口大。顶部href锚点链接中的#a #b #c等使浏览器滚动到页面中的相关锚点。

如果你想打开一个div进行显示，你可以使用window.location.search来获取＃之后的部分，并且这是一个id来打开相关的div。使用JQuery可能最容易做到这一点。

代码：

<!-- these links could be on another page so the href would be like <a href="page.html#a"></a>

            <a href="#a">Go to One</a> |
            <a href="#b">Go to Two</a> |
            <a href="#c">Go to Three</a>




<div>
    <a name="a"></a> <!-- no title text in the anchor means this doens't appear, it just acts as a placeholder to scroll to when a loink is clicked with destination href=something#a -->
    One<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
</div>
<div>
    <a name="b"></a>
    TWO<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
        Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
        Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
        Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
</div>
    <div>
    <a name="c"></a>
    THREE<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
          Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
          Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
          Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
    Line<br>
</div>

（到达）使用来自其他页面的'href'取消隐藏特定div

2 个答案: