4

我有一个水平导航的网站。

这是代码：

<ul>
    <li><a href="#box-1"></a></li>
    <li><a href="#box-2"></a></li>
    <li><a href="#box-3"></a></li>
    <li><a href="#box-4"></a></li>
    <li><a href="#box-5"></a></li>
    <li><a href="#box-6"></a></li>
    <li><a href="#box-7"></a></li>
    <li><a href="#box-8"></a></li>
    <li><a href="#box-9"></a></li>
    <li><a href="#box-10"></a></li>
</ul>
<div id="content">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
    <div id="box-5"></div>
    <div id="box-6"></div>
    <div id="box-7"></div>
    <div id="box-8"></div>
    <div id="box-9"></div>
    <div id="box-10"></div>
</div>

每个框的宽度为 300 像素。但是当我单击时，如果它在分辨率区域中可见，它不会滚动到该框。我想要做的是，例如，如果我单击<a href="#box-3">它会将我带到 div #box-3，但它将是左侧的第一个，其他 div 必须被隐藏。它只在分辨率很小的时候隐藏其他 div，它工作得很好，但如果分辨率很宽，它就不会工作..

4

4 回答 4

6

就像是：

$(document).ready(function() {

    $('ul>li>a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000);
        event.preventDefault();
    });

});

如果您尝试在几个元素之间水平滚动，则应该这样做。

这是另一个参考：链接

于 2013-04-09T22:41:55.343 回答
4

如果我理解得很好，您需要水平滚动，并且每个“屏幕”都有一个整页宽度。如果是这种情况，您不需要 javascript，但您只能使用 css 来制作，除非您需要在“屏幕”之间使用平滑滚动。

在不使用 js 的情况下，您只需将 eachbox的宽度设为 100% 并将内容包含在一个子项中。

检查这个小提琴以获得这个想法

于 2016-11-10T14:00:52.433 回答
0

根据 David Fariña 的回答，这个句柄也来到了页面

function horizontal_anchor(){
 var hash=decodeURIComponent(location.hash);/*decode special chars like spaces*/
 jQuery('html, body').stop().animate({
 scrollLeft: jQuery(hash).offset().left
 }, 1000);
}

jQuery(document).ready(function(){  
        //on load
        if(location.hash) horizontal_anchor();
        //on url change
        jQuery(window).on('hashchange',function(event){
            horizontal_anchor()
            event.preventDefault();
        });
});
于 2019-05-23T14:51:35.940 回答
-3

如果我理解正确，你有一个固定宽度的区域，你想一次显示一个？像这样？

<ul>
    <li><a href="#box-1">menu item 1</a></li>
    <li><a href="#box-2">menu item 2</a></li>
    <li><a href="#box-3">menu item 3</a></li>
    <li><a href="#box-4">menu item 4</a></li>
</ul>

<div id="container">
    <div id="content">
        <div class="box-container" id="box-1">
            <div class="box-contents">stuff</div>
        </div>
        <div class="box-container" id="box-2">
            <div class="box-contents">stuff</div>
        </div>
        <div class="box-container" id="box-3">
            <div class="box-contents">stuff</div>
        </div>
        <div class="box-container" id="box-4">
            <div class="box-contents">stuff</div>
        </div>
    </div>
</div>

#container { width: 100%; overflow: hidden;}
#content { width: 400%; }   
.box-container { width: 25%; background-color: red; float: left; display: block;}
.box-contents { height: 300px; width: 300px; text-align: left; background-color: blue; }

这里的jsfiddle示例：http: //jsfiddle.net/8B3hL/

显然你需要链接这些菜单项，但你明白了

于 2013-04-09T22:45:56.787 回答