-1

我正在制作一个网站，这段代码让我在 1 个 .html 文件中有几个页面。可以避免此代码的迭代性吗？可以简化吗？

<script type="text/javascript">
        var x = 300;
        $(function() { 
            $("#indexLink").click(function() { 
                $("#content>div").not("#start").hide(x);
                $("#index").show(x);
                $('nav>ul>li').removeClass('active');
                $('#indexLink').addClass('active');
            });

            $("#leerlingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#leerling").show(x); 
                $('nav>ul>li').removeClass('active');
                $('#leerlingLink').addClass('active');
            });

            $("#bestemmingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#bestemming").show(x);
                $('nav>ul>li').removeClass('active');
                $('#bestemmingLink').addClass('active');
            });

            $("#betalingLink").click(function() { 
                $("#content>div").not("#start").hide(x); 
                $("#betaling").show(x);
                $('nav>ul>li').removeClass('active');
                $('#betalingLink').addClass('active');
            });
        });

</script>
4

3 回答 3

1

假设被点击的东西不是锚链接，你可以给元素所有相同的类并写一次 -

编辑：根据这些是锚链接的信息进行了更改。

$('.classname').click(function(event) {
    event.preventDefault(); 
    $("#content>div").not("#start").hide(x);
    var idString = this.id
    var shortIDString = idString.slice(0,-4); //remove the 'Link'
    $("#" + shortIDString).show(x);
    $('nav>ul>li').removeClass('active');
    $(this).addClass('active');
});
于 2013-02-05T19:48:21.517 回答
0

您可以使用 for 循环并构造选择器：

$(function () {
    var items = ["index", "leerling", "bestemming", "betaling"];
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        $("#" + item + "Link").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#" + item).show(x);
            $('nav>ul>li').removeClass('active');
            $('#' + item + 'Link').addClass('active');
        });
    }
});

您还可以向 all 添加一个处理程序#whateverLinks，然后根据事件目标的 id 值检测链接名称。

于 2013-02-05T19:45:14.987 回答
0

你是什​​么意思iterative-ness？

如果你希望你的代码是干燥的，你可以写这样的东西：

<script type="text/javascript">
    var x = 300;
    $(function () {
        $("#indexLink,#betalingLink,#bestemmingLink,#leerlingLink").click(function () {
            $("#content>div").not("#start").hide(x);
            $("#"+$(this).attr("id").slice(0,-4)).show(x);
            $('nav>ul>li').removeClass('active');
            $('#indexLink').addClass('active');
        });
    });
</script>

这将采用所有选择器，一次一个，并让所有选择器运行您的代码，与您键入的代码基本相同，但仅在一个选择器中

编辑

固定 div 显示

编辑2

添加了 jsfiddle 以显示它的工作原理：http: //jsfiddle.net/NicosKaralis/Vurjf/

于 2013-02-05T19:46:47.413 回答