Question

我正在寻找一种通过链接仅使用JQuery来重复显示和隐藏div的方法。我已经写了一个例子。

<div id="section1">
<a href="http://www.google.com" target="_blank">Google</a>
</div>

<div id="section2">
<a href="http://www.yahoo.com" target="_blank">Yahoo</a>
<div>

在上述情况中，我们假设第2部分隐藏在页面加载上。当点击Google链接然后重新显示第1部分并在点击Yahoo链接时隐藏第2部分，我如何能够显示第2部分并隐藏第1部分？

我已经完成了这项工作，但它包含了大量的脚本（javascript），并且在Internet Explorer中无法正常工作，这是主要问题。

感谢您的帮助！我非常感激!!!

Answer 1

您需要基于jQuery的类似内容：

$(document).ready(function() {

    $('#section1').show();
    $('#section2').hide();

    $('#section1 a').click(function() {
        $('#section1').hide('fast');
        $('#section2').show('fast');
        return false;
    });

    $('#section2 a').click(function() {
        $('#section2').hide('fast');
        $('#section1').show('fast');
        return false;
    });

});

我没有测试过，可能需要修改，可能会缩短。更多信息：http://www.learningjquery.com/2006/09/slicker-show-and-hide

Answer 2

利用jQuery库中提供的.hide()和.show()方法来完成你的任务......

或使用.toggle()轻松处理任务..

$('#section1 a').click(function(){
    $('#section1').hide();
    $('#section2').show();
});
$('#section2 a').click(function(){
    $('#section2').hide();
    $('#section1').show();
});

Answer 3

这是一个jsfiddle，展示了如何使用show（）和hide（）来做你所要求的：

http://jsfiddle.net/ZvB7X/1

这里是相关的jQuery（你需要查看jsfiddle，看看它伴随着css和标记，这里不需要重复。）

$('#section1 a').click(function(){
    $('#section1').hide();
    $('#section2').show();
});

$('#section2 a').click(function(){
    $('#section2').hide();
    $('#section1').show();
});

通过链接显示/隐藏Div / Pure JQuery

3 个答案: