使用 jQuery 在 div 之间转换

2024-01-05

我有三个divs。我有一个主 div,为用户提供了选择查看其他两个 div 的选项。如果我只使用文本并且不隐藏原始 div,它就可以工作。但我想使用图像映射并隐藏主 div,然后如果用户选择,他们可以单击后退按钮并让 div 重新出现,并且他们正在查看的 div 会淡出。我已经部分解决了,但需要帮助完成脚本,以便它可以正常工作,因为 JS 不是我的强项。这是代码:

JS

// I am using jQuery Version 1.7.2

var $j = jQuery.noConflict();

//Script for Choosing which form to display
$j("#transformed-link, #changed-link").live('click',
 function(){  

    //figure out what button was clicked. 
    if(this.id === "transformed-link"){
        var btnA = $j(this);
        var btnB = $j("#changed-link");
        var divA = $j('#transformed-aviation');
        var divB = $j('#changed-aviation');
    }
    else{
        btnA = $j(this);
        btnB = $j("#transformed-link");
        divA = $j('#changed-aviation');
        divB = $j('#transformed-aviation');
    }

    //make sure it is not already active, no use to show/hide when it is already set
    if(btnA.hasClass('active')){
        return; 
    }

    //see if div is visible, if so hide, than show first div
    if(divB.is(":visible")){        
        divB.fadeOut("slow", function(){
             divA.fadeIn("slow");
        });
    }
    else{//if already hidden, just show the first div
        divA.fadeIn("slow"); 

         //Add and remove classes to the buttons to switch state
    btnA.addClass('active').removeClass('inactive ');
    btnB.removeClass('active').addClass('inactive ');

    }
}    

);

HTML

<div id="nav-main">
<!-- This is the original main div that users will choose which div to show. -->
<img src="nav-main.jpg" width="940" height="400" usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="rect" coords="52,146,420,258" href="#transformed-link" class="inactive" />
  <area shape="rect" coords="536,145,876,267" href="#changed-link" class="inactive"  />
</map>
</div>

<div id="transformed-aviation" class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

<div id="changed-aviation" class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

CSS

/* 大多数 CSS 仅是特定于页面的。 nav-main、transformed-aviation、changed-aviation 只是 JS 的标识符,没有分配给它们的代码。 */

.hide{ display:none; }

我的问题归结为:

如何淡出原始 div 并使其淡入用户选择的 div。然后,通过链接允许用户返回主 div(从而淡出当前 div 并淡入主或原始 div)。

请随意修改或完全重写原始脚本。但请提供示例我在这个脚本上得到了帮助 https://stackoverflow.com/questions/7975480/jquery-changing-styles-and-displaying-certain-elements并且不知道足够的 JS 来自己编写它。

Thanks!


认为你想要一个back控制两个div到主div以及主 div 中的选择 div 选项。

Here http://jsfiddle.net/blasteralfred/rY293/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQuery 在 div 之间转换 的相关文章

随机推荐

  • 发布版本中的错误在调试模式下不存在的常见原因

    仅在发布编译模式下出现但在调试模式下不会出现的错误和异常程序行为的典型原因是什么 很多时候 在 C 的调试模式下 所有变量都初始化为 null 而在发布模式下 除非明确说明 否则不会发生同样的情况 检查是否有任何调试宏和未初始化的变量 你的
  • 在Rails中,我应该启用serve_static_assets吗?

    我目前正在使用 Apache 代理到 Thin 使用这个article http articles slicehost com 2008 5 6 ubuntu hardy apache rails and thin 我的静态资源都不起作用
  • 解决 android studio 中的 gradle 依赖问题?

    我正在尝试添加一个样式化的进度条https android arsenal com details 1 1375 https android arsenal com details 1 1375 那里说 将特定存储库添加到您的构建文件中 r
  • iOS 9 和 Swift 2 升级后,Facebook SDK 登录时出现“以“null”打开此页面”模式

    我正在将项目更新到 Swift 2 和 iOS 9 我正在做的项目之一严重依赖 Facebook 的 SDK 我用它来登录 获取用户信息等 在更新之前 一旦您登录 Safari 就会将您直接重定向到该应用程序 现在我得到一个有趣的小模态 显
  • 静态分析警告是否会使 CI 构建失败?

    我们的团队正在研究项目中静态分析的各种选项 并且对于我们是否希望我们的持续集成构建因静态分析的警告而失败有不同的意见 反对构建失败的论点是 规则中经常存在例外情况 而试图绕过这些例外只是为了使构建成功会降低生产力 更好的方法是在构建时生成报
  • 如何使文本输入不可编辑?

    所以我有一个文本输入
  • 使用 Guava 进行缓存

    哪些 Guava 类适合线程安全缓存 我使用组合键 它是动态构建的 所以 softKeys 没有意义 对吧 我在某处看到 ConcurentLinkedHashMap 这是要走的路吗 它已经在最近的版本中了吗 抱歉 提问方式很混乱 Upda
  • 如何在 CodeIgniter 表单验证中使用 Bootstrap 错误样式?

    我的代码有一点问题 我正在研究 bootstrap CSS 我对这个框架感到非常惊讶 这就是为什么我决定研究这个 我对 CSS 的了解确实不够 但我明白一点 我正在创建一个表单 如果用户名或密码错误 我希望收到一条验证消息 我需要进行验证
  • 如何在我的应用程序中使用 UIKit 本地化字符串

    我们正在构建一款 iOS 游戏 我们公司需要取消按钮UIAlertView应始终根据用户的设备语言进行本地化 看起来UIKit框架中有这样一个字符串 我如何在我自己的应用程序中访问它 或者 还有其他方法可以创建带有本地化取消按钮的 UIAl
  • SQL 手机号码验证

    我有我的 SQL 数据库 我想在其中过滤掉所有有效的手机号码 我目前使用如下 WHERE pn PhoneNumber LIKE 0 9 0 9 0 9 0 9 0 9 0 9 0 9 0 9 0 9 0 9 0 9 OR pn Phone
  • 如何仅为测试源添加 Scala 编译器插件

    是否可以仅在编译测试源时添加Scala编译器插件 当通过调用 SBT 添加编译器插件时addCompilerPlugin然后添加库依赖项 相关方法有 Transforms dependency to be in the auto compi
  • jQuery Offset 返回负值

    我有一个像下面这样的场景 在我的用户界面中 我将有一个文本框 如果我在文本框中输入了数字 我需要向下滚动到相应的页码 In Dom 我将有一些带有各自 id 的 div 如果用户输入页码为 5 我将检查 dom 中的第 5 个 div 偏移
  • 在浏览器中流式传输 Pdf 时如何设置文件名?

    不确定如何确切地表达这个问题 所以欢迎编辑 无论如何 就这样吧 我目前使用 Crystal Reports 生成 Pdfs 并将输出流式传输给用户 我的代码如下所示 System IO MemoryStream stream new Sys
  • Cmake 无法找到 Python 库

    出现此错误 sudo unable to resolve host coderw ll Could NOT find PythonLibs missing PYTHON LIBRARIES PYTHON INCLUDE DIRS CMake
  • 升级到 R 2.15.2 无法加载 stats 包

    运行 Ubuntu 12 04 今天终于从 2 12 升级到 2 15 2 当我启动 R 时 出现此错误 Error in dyn load file DLLpath DLLpath unable to load shared object
  • 在Python中使用Hadoop处理大型csv文件

    我有一个巨大的 CSV 文件 想在 Amazon EMR python 上使用 Hadoop MapReduce 进行处理 该文件有 7 个字段 但是我只查看date and quantity field date receiptId pr
  • 如何在PHP中备份MySQL数据库?

    我对如何通过 PHP 备份 MySQL 数据库没有基本的了解 我遵循了一篇教程 但它并没有帮助我理解 有人可以解释如何从 PHP 创建 MySQL 备份吗 虽然您可以从 PHP 执行备份命令 但它们实际上与 PHP 没有任何关系 这都是关于
  • pandas 将两列分组并乘以另外两列

    我有一个像这样分组的数据框 price quantity vat date brand 20 Jun 13 Reebok 7 0 8 2 2 Adidas 12 0 3 3 8 Campus 2 5 38 4 2 Woodlands 23
  • 无法加载文件或程序集“System.Data.SQLite,版本=1.0.109.0 - 当我引用 1.0.109.1 时,为什么它会搜索版本 1.0.109.0

    我已经创建了新的ASP NET Core Web Application并使用ASP NET Core 2 1跨平台框架 接下来 我添加了System Data SQLite Core using Nuget manager 它是适用于 x
  • 使用 jQuery 在 div 之间转换

    我有三个divs 我有一个主 div 为用户提供了选择查看其他两个 div 的选项 如果我只使用文本并且不隐藏原始 div 它就可以工作 但我想使用图像映射并隐藏主 div 然后如果用户选择 他们可以单击后退按钮并让 div 重新出现 并且