如何浏览作为链接列表的url数组以及上一个/下一个链接

How to navigate through an array of urls as list of links and with previous/next links?

本文关键字：链接 数组 url 上一个 下一个 列表 浏览 何浏览      更新时间：2023-09-26

我有一个url数组，我想在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>

给出下一个和上一个链接的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(); });
});
要处理显式链接，我将使用data属性来存储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")); });
});
相关文章：