Question

我有一个网址数组，我想在iframe中逐个显示。用户将通过单击URL列表中的链接或单击上一个/下一个链接来导航到每个URL。做这个的最好方式是什么？非常感谢工作代码片段。

为了获得最佳清晰度，我发布了尽可能少的详细信息。

var urls = [{"name":"ebay","url":"http://ebay.com"},
{"name":"amazon","url":"http://amazon.com"},
{"name":"msn","url":"http://msn.com"},
{"name":"yahoo","url":"http://yahoo.com"},
{"name":"wikipedia","url":"http://wikipedia.org"}];

链接列表（导航的替代方式，而不是下面的上一个/下一个链接）

<ol id="list">
  <li><a href="" target="myframe">ebay</a></li>
  <li><a href="" target="myframe">amazon</a></li>
  <li><a href="" target="myframe">msn</a></li>
  <li><a href="" target="myframe">yahoo</a></li>
  <li><a href="" target="myframe">wikipedia</a></li>
</ol>

currently viewing: <span id="current"></span>

prev: <a href="" target="myframe"></a> | next: <a href="" target="myframe"></a>

//all the links will open inside this iframe using target="myframe"
<iframe src="" name="myframe" id="myframe"></iframe>

Answer 1

提供您的下一个和上一个链接ID

prev: <a href="" id="prev" target="myframe"></a> | next: <a id="next" href="" target="myframe"></a>

然后一些基本脚本应该将其连接起来

var currentIndex = 0;
function next(){
    if (currentIndex != Urls.length - 1)
        load(urls[++currentIndex].url);
}

function previous(){
    if (currentIndex != 0)
        load(urls[--currentIndex].url);
}

function() load(url){
    $("#myframe").attr("src", url);
}

$(function() {
    $("#prev").click(function() { previous(); });
    $("#next").click(function() { next(); });
});

要处理显式链接，我会使用数据属性来存储url，并使用相同的加载函数：

<ol id="list">
  <li><a href="#" data-url="www.ebay.com" >ebay</a></li>
  <li><a href="#" data-url="www.amazon.com" >amazon</a></li>
  <li><a href="#" data-url="..." >msn</a></li>
  <li><a href="#" data-url="..." >yahoo</a></li>
  <li><a href="#" data-url="..." >wikipedia</a></li>
</ol>

然后在jQuery文档中加载函数，如：

$("#list a").click(function() { load($(this).data("url")); });

所以整个事情看起来像：

$(function() {
    $("#prev").click(function() { previous(); });
    $("#next").click(function() { next(); });
    $("#list a").click(function() { load($(this).data("url")); });
});

如何浏览一系列网址作为链接列表和上一个/下一个链接？

1 个答案: