0

我一直在搞乱stellar.js。在我的设计中，导航需要变成一个select以节省横向空间。

我想html会与此类似：

<select>
   <option data-slide="1">Accueil</option>
   <option data-slide="2">Services</option>
   <option data-slide="3">Réalisations</option>
   <option data-slide="4">Contact</option>
</select>

但是，我不确定.js应该如何更改文件才能做到这一点。我相信这就是魔法发生的地方，但我不是 100% 的：

slide.waypoint(function (d, e) {
    dataslide = c(this).attr("data-slide");
    if (e === "down") {
        c('.navigation li[data-slide="' + dataslide + '"]').addClass("active").prev().removeClass("active")
    } else {
        c('.navigation li[data-slide="' + dataslide + '"]').addClass("active").next().removeClass("active")
    }
});

有没有人这样做过？谢谢 ！

4

1 回答 1

1

我可以从您发布的代码中看出您正在关注Tutsplus中发布的教程，对吧？

好吧，那段 Javascript 代码利用航点插件将与视口中的幻灯片对应的链接标记为选中（并因此在视觉上增强它）。但是由于您将使用下拉列表，因此上述方法是无用的。要完成任务，您首先需要确保在更改选择框值时正确滚动用户。这将成为诀窍（您最好更改下面的 jQuery 选择器，以确保此处理程序不会影响页面中的任何其他输入控件，但主下拉导航小部件）：

$('select').on('change', function() {
    var slide = $(this).find(':selected').data('slide');
    goToByScroll(dataslide);
});

好的，现在我们需要确保列表框在用户执行滚动时更改其默认值。我们将利用您发布的一些代码。这样的事情就足够了：

slide.waypoint(function (d, e) {
    var dataslide = c(this).attr("data-slide");
    $('select').prop('selectedIndex', parseInt(dataslide)-1);
});

需要注意的是，上面的代码假定所有幻灯片都有一个从 1 到 n 的数字数据幻灯片值，并且每个列表框索引引用页面中具有相同索引的匹配幻灯片，加上 1，作为其排序顺序与它所代表的数据幻灯片相同。

于 2013-10-17T23:51:22.377 回答