1

我有这个功能。

$(".link").click(function(){
            var page = $(this).attr("id");
            var color = $(this).attr("class");
            var height = $(this).attr("class");
            var scrolltop = 100;
            color = color.substr(5,6);
            height = height.substr(12,6);
            $('#all_pages').animate({left: (page-1)*(-650) }); 
            $("body").animate({backgroundColor: '#'+color});
            $('html, body').animate({scrollTop: scrolltop}, 'slow');
            $("#container").animate({height: height});
            $("#all_pages").animate({height: height});
            $("#menu ul li").removeClass('active');
            $(this).addClass('active'); 
        });

和这些链接：

<div id="menu">
            <ul>
                <li id="1" class="link 99CCCC 0620px 0000px active">Home</li>
                <li id="2" class="link FF9933 0890px 0200px">Services</li>
                <li id="3" class="link 66FFCC 1265px 0210px">Tourism</li>
                <li id="4" class="link 99FF99 1580px 0220px">Prices</li>
                <li id="5" class="link FF9999 0485px 0230px">Ask question</li>
                <li id="6" class="link 00CCFF 0450px 0240px">Partners</li>
                <li id="7" class="link EBF291 0450px 0250px">FAQ</li>   
                <li id="8" class="link FFFF66 0850px 0260px">Contact Us</li>                            
            </ul>
        </div>

从链接我得到背景的颜色，页面的高度。我也想获取页面上位置的信息，但我不知道如何获取变量的值--- var scrolltop。

谁能帮我？

4

3 回答 3

2

您可以使用data-*属性来保存自定义属性的值。

利用

<li data-page="1" data-color="99CCCC" data-height="620" data-position="0" class="link active">Home</li>

代替

<li id="1" class="link 99CCCC 0620px 0000px active">Home</li>

用于.data()从 JavaScript 获取属性。

$(".link").click(function() {
    /* cache the selector */
    var $this = $(this);
    /* Get the properties */
    var page = $this.data("page");
    var color = $this.data("color");
    var height = $this.data("height");
    /* I suppose this is what you wanted */
    var scrolltop = $this.data("position");
    ...
});​

如果通过单击每个<li>应该将视口滚动到另一个元素所在的页面中的某个位置。然后你可以得到那个元素的位置并在那里滚动而不是硬编码这些值。

例如，

您想滚动到id设置为的元素home。

<div id="home">

将data-position属性设置为它的选择器，#home.

<li data-page="1" data-color="99CCCC" data-height="620" data-position="#home" class="link active">Home</li>

使用选择器获取元素，使用它获取它的位置.offset()并滚动到它。

var $target = $($this.data("position"));
var scrolltop = $target.offset().top;
$('html, body').animate({ scrollTop: scrolltop }, 'slow');
于 2012-12-30T11:23:40.067 回答
1

在唯一的情况下，您无法更改 HTML 结果：
用于.split(' ')从 attr 类中检索数据并且您不需要 'px' 和前导零，因此请使用parseInt.

jsBin 演示

$(".link").click(function(){
  
  var myClass   = $(this).attr("class").split(' '); // split class
  var color     = myClass[1];
  var height    = parseInt( myClass[2] , 10);
  var scrolltop = parseInt( myClass[3] , 10); 
  
  alert( color+' '+height+' '+scrolltop );
  
});

在所有其他情况下，使用.data()@Alexander 建议的属性

于 2012-12-30T11:29:41.273 回答
1

您可以使用此代码获得职位

$(this).offset().top;

您可以在此链接上找到有关此功能的更多信息

http://api.jquery.com/offset/

我希望这会很有用。

于 2012-12-30T11:21:54.293 回答