Javascript jquery显示另一个链接，然后隐藏自身

我的视图中有以下jquery：

$(document).ready(function() {
    $(function() {
        $('#link1').click(function() {
            $('#link2').show();
            $('#link1').hide();
            $('#frame').attr('src', 'http://google.com/');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('#link2').click(function() {
            $('#link1').show();
            $('#link2').hide();
            $('#frame').attr('src', 'http://yahoo.com/');
        });
    });
});

在页面加载时，

link2

设置为隐藏。jQuery所做的是：当单击id为

link1

的链接时，它将显示id为

link2

的链接并隐藏自身。反之亦然

我的问题是，我的jQuery代码似乎仍然可以简化。是否有其他方法可以用更简单的版本实现我想要的功能？谢谢你的帮助

工作示例：

add方法允许您向匹配器集添加不同的选择器，从而同时绑定两次单击。通过将构造的集合保存到一个变量（

linkSet

），它可以避免您必须遍历DOM两次

这里唯一的两个假设是

1） 在初始状态下，只有一个可见

2） id结构是有意义的、有用的，而类是不够的

回答关于在

#frame

上设置属性的第二个问题。有很多方法可以做到这一点。也许最简单的方法是将以下内容添加到。单击处理程序（在

切换之后）

就个人而言，我可能会向链接元素添加一个自定义属性，例如：

<a id='link1' iframe-source='www.google.com'>
<a id='link2' iframe-source='www.yahoo.com'>

保存源代码if的原因是，如果您试图在
$（'frame'）
上的
.attr
中获取
$（this）
，它将（一如既往）返回当前匹配的元素，即
$（'#frame'）

或者（与上述方法非常相似），您可以使用链接的innerHTML。例如：

<a id='link1'>link1<span style="display:none">www.google.com</span></a>
<a id='link2'>link2<span style="display:none">www.yahoo.com</span></a>

就我个人而言，我不喜欢最后一种方法，因为它污染了DOM结构，导致渲染时间稍贵，并且（在我看来）代码可读性较差。实际上，这三种方法都很有效

<p class="link" style="display:none;" data-link="http://google.com/">sfdf</p>
<p class="link" data-link="http://yahoo.com/">ee</p>

$('.link').click(function() {
    $('.link').toggle();
    $('#frame').text($(this).data("link"));
  });

add方法允许您向匹配器集添加不同的选择器，从而同时绑定两次单击。通过将构造的集合保存到一个变量（
linkSet
），它可以避免您必须遍历DOM两次

这里唯一的两个假设是

1） 在初始状态下，只有一个可见

2） id结构是有意义的、有用的，而类是不够的


回答关于在
#frame
上设置属性的第二个问题。有很多方法可以做到这一点。也许最简单的方法是将以下内容添加到。单击处理程序（在
切换之后）

就个人而言，我可能会向链接元素添加一个自定义属性，例如：

<a id='link1' iframe-source='www.google.com'>
<a id='link2' iframe-source='www.yahoo.com'>

保存源代码if的原因是，如果您试图在
$（'frame'）
上的
.attr
中获取
$（this）
，它将（一如既往）返回当前匹配的元素，即
$（'#frame'）

或者（与上述方法非常相似），您可以使用链接的innerHTML。例如：

<a id='link1'>link1<span style="display:none">www.google.com</span></a>
<a id='link2'>link2<span style="display:none">www.yahoo.com</span></a>

就我个人而言，我不喜欢最后一种方法，因为它污染了DOM结构，导致渲染时间稍贵，并且（在我看来）代码可读性较差。实际上，这三种方法都可以正常工作。
sfdf
<p class="link" style="display:none;" data-link="http://google.com/">sfdf</p>
<p class="link" data-link="http://yahoo.com/">ee</p>

$('.link').click(function() {
    $('.link').toggle();
    $('#frame').text($(this).data("link"));
  });

ee
$（'.link'）。单击（函数（）{
$（'.link'）.toggle（）；
$（'#frame'）.text（$（this）.data（“link”）；
});

jsiddle:
sfdf
ee
$（'.link'）。单击（函数（）{
$（'.link'）.toggle（）；
$（'#frame'）.text（$（this）.data（“link”）；
});

jsidle:
使用jQuery

再加上这个

<a href="http://google.com/" target="frame" id="link1"> Google </a>
<a href="http://yahoo.com/" target="frame" id="link2"> Yahoo </a>

使用jQuery

再加上这个

<a href="http://google.com/" target="frame" id="link1"> Google </a>
<a href="http://yahoo.com/" target="frame" id="link2"> Yahoo </a>

你可以使用，只是一个快速的想法…你可以使用，只是一个快速的想法…请参阅关于这个问题的更新代码。我忘了在单击时也会更改iFrame上的链接。谢谢上面我有三个可行的解决方案，您所说的“切换后”
“是什么意思？在我最初的回答中，直接在“linkSet.toggle（）”之后，请参阅关于这个问题的更新代码。我忘了在单击时也会更改iFrame上的链接。谢谢上面我有三个可行的解决方案，您所说的“切换后”

“是什么意思？在我最初的回答中，直接在“linkSet.toggle（）”之后，请参阅关于这个问题的更新代码。我忘了在单击时也会更改iFrame上的链接。谢谢请参阅有关该问题的最新代码。我忘了在单击时也会更改iFrame上的链接。谢谢请参阅有关该问题的最新代码。我忘了在单击时也会更改iFrame上的链接。谢谢请参阅有关该问题的最新代码。我忘了在单击时也会更改iFrame上的链接。谢谢

$(function() {
  $('#link1, #link2').click(function() {
    $('#link1, #link2').toggle();
  });
});