Question

我有一组li元素形成一个菜单。当用户单击特定的li元素时，我想将iframe元素的源更改为与所单击的项对应的URL。

我已经尝试过以下功能，但它没有用。有人可以建议怎么做吗？

$(document).ready(function(){
    var source1="http://www.hurriyet.com.tr";
    var source2="http://www.milliyet.com.tr";
    var source3="http://www.vatan.com.tr";
    var source4="http://www.ensonhaber.com";
    $("#menubar ul li:nth-child(i)").click(function(){
        $(this).attr('src', source(i) );
    });
});

Answer 1

您可以使用数组，然后使用单击的li元素索引从数组中获取目标源。

$(document).ready(function(){
    var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
    $("#menubar li").click(function(){
       $('#iframe1').attr('src', sources[$(this).index()])
    });
});

演示：Fiddle

Answer 2

这种类型的功能是数组的用途：

$(document).ready(function(){
    var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
    i = 0;
    $("#menubar li").click(function(){
        $("#iframe1").attr('src', sources[$(this).index()] );
    });
});

但是，在JavaScript中指定所有网址并依赖与菜单li元素的顺序匹配的索引是一种脆弱的方式。我建议更密切地链接这些值，可能是这样的：

<ul id="menubar">
    <li data-src="http://www.hurriyet.com.tr">Hurriyet</li>
    <li data-src="http://www.milliyet.com.tr">Milliyet</li>
    <li data-src="http://www.vatan.com.tr">Vatan</li>
    <li data-src="http://www.ensonhaber.com">Ensonhaber</li>
</ul>

然后用JS：

$(document).ready(function () {
    $("#menubar li").click(function () {
        $("#iframe1").attr('src', $(this).attr("data-src"));
    });
});

nth-child随着点击而增加减少

2 个答案: