jquery - 通过链接显示/隐藏带有纯 JQuery 的 Div

标签 jquery html hide show

我正在寻找一种仅使用 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 链接时显示第 2 部分并隐藏第 1 部分,然后在单击 Yahoo 链接时重新显示第 1 部分并隐藏第 2 部分?

我已经完成了这项工作,但它包含大量繁重的脚本 (javascript),并且无法在 Internet Explorer 中运行,这是主要问题。

感谢大家的帮助!非常感谢!!!

最佳答案

你会想要基于 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

关于jquery - 通过链接显示/隐藏带有纯 JQuery 的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9799407/

相关文章:

android - jquery 移动或 HTML5 应用程序

html - Bootstrap 3 - 适当减少超小型设备手机(<768px)的 <div> 宽度

javascript - 如何将元素的位置设置在固定位置元素下方 5px

javascript - 什么时候在 html 中包含 javascript 与外部 .js 比较合适?

javascript - jQuery - 隐藏元素但保留空间

javascript - 如何从一个区域管理多个 html 导航栏以避免转到每个 html 页面并更改导航栏链接?

javascript - 使用 jquery 可排序和 css 变换/过渡

php - 带附件的表单 - jquery ajax php

javascript - AngularJS - ng-click 和 ng-show

jQuery - 隐藏元素后的文本