javascript - jQuery Content Slide(有效但正在寻找更简单的解决方案)-6ren

javascript - jQuery Content Slide(有效但正在寻找更简单的解决方案)

转载作者：行者123 更新时间：2023-11-28 13:51:24

25

4

下面的代码可以正常工作，但我想知道是否有更简化的代码可以用于所有这些 if 语句，或许调用单个函数？我试过了，但显然我需要根据按下的按钮跳过一个 if 语句。欢迎任何想法或评论。

<html>
<head>
<title>Slide_IN</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
body{
    overflow:hidden;
}

#content_home {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#96C;
    top:200px;
}

#content_about {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#FF6633;
    top:200px;
}

#content_folio {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#CC0000;
    top:200px;
}

#content_contact {
    position: absolute;
    top: 0;
    right: -100%;
    width:80%;
    color:#9C0;
    top:200px;
}
</style>
<script>

$(function(){
    $(".home").click(function() {
        if($('#content_about').css("left") == '10%'){
            $("#content_about").animate({'left':'-100%'}, "slow", function(){$('#content_about').removeAttr('style')});
        }
        if($('#content_folio').css("left") == '10%'){
            $("#content_folio").animate({'left':'-100%'}, "slow", function(){$('#content_folio').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_home").animate({'left':'10%'}, "slow");
    });

    $(".about").click(function() {
        if($('#content_home').css("left") == '10%'){
            $("#content_home").animate({'left':'-100%'}, "slow", function(){$('#content_home').removeAttr('style')});
        }
        if($('#content_folio').css("left") == '10%'){
            $("#content_folio").animate({'left':'-100%'}, "slow", function(){$('#content_folio').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_about").animate({'left':'10%'}, "slow");
    });

    $(".folio").click(function() {
        if($('#content_home').css("left") == '10%'){
            $("#content_home").animate({'left':'-100%'}, "slow", function(){$('#content_home').removeAttr('style')});
        }
        if($('#content_about').css("left") == '10%'){
            $("#content_about").animate({'left':'-100%'}, "slow", function(){$('#content_about').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_folio").animate({'left':'10%'}, "slow");
    });

    $(".contact").click(function() {
        if($('#content_home').css("left") == '10%'){
            $("#content_home").animate({'left':'-100%'}, "slow", function(){$('#content_home').removeAttr('style')});
        }
        if($('#content_about').css("left") == '10%'){
            $("#content_about").animate({'left':'-100%'}, "slow", function(){$('#content_about').removeAttr('style')});
        }
        if($('#content_folio').css("left") == '10%'){
            $("#content_folio").animate({'left':'-100%'}, "slow", function(){$('#content_folio').removeAttr('style')});
        }
        if($('#content_contact').css("left") == '10%'){
            $("#content_contact").animate({'left':'-100%'}, "slow", function(){$('#content_contact').removeAttr('style')});
        }

        $("#content_contact").animate({'left':'10%'}, "slow");
    });
});



</script>
</head>

<body>
<a class="home" href="#index">Home</a><br>
<a class="about" href="#about">About</a><br>
<a class="folio" href="#folio">Portfolio</a><br>
<a class="contact" href="#contact">Contact</a>
<div style="" id="content_home"> HOME Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
<div style="" id="content_about"> ABOUT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
<div style="" id="content_folio"> PORTFOLIO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
<div style="" id="content_contact"> CONTACT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem dui, consequat in malesuada et, varius rutrum nunc. Duis consequat, felis non convallis hendrerit, turpis enim mattis lacus, id bibendum arcu orci sit amet arcu. Sed lobortis, mi ac varius semper, lorem ante laoreet justo, vel mollis ante massa vitae lacus. Praesent quis ipsum libero. Donec in nulla ipsum. Nulla facilisi. Sed et nibh est, a suscipit urna. Nunc hendrerit dolor vel eros ultrices dapibus semper odio elementum. Vivamus et quam ut eros venenatis volutpat nec in velit. Proin sed nisl non nulla vulputate aliquam sit amet et ipsum.
</div>
</body>
</html>

工作 jsFiddle:http://jsfiddle.net/janey/LnDsE/

最佳答案

而不是你的类 .about,.contact,.folio

尝试作为单行函数启动

$(".about,.contact,.folio").click(){}

如果您有相同的 jsfiddle 演示，请分享。

关于javascript - jQuery Content Slide(有效但正在寻找更简单的解决方案)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11344265/

25

4

0

文章推荐： css - jQuery Mobile 因最小高度而破坏样式

文章推荐： javascript - 如何优化我的 if 语句或减少 if 语句？

文章推荐： javascript - 为什么获取 LocalStorage 项会产生 “undefined” ？

文章推荐： javascript - 当 native 键盘在移动设备上可见时禁用滚动

visual-studio-2010 - Visual Studio 2010 Professional 解决方案/项目是否与 Visual Studio 2010 Premium 解决方案/项目 100% 兼容？
我只是想知道要安装哪个版本的 Visual Studio 2010(专业版或高级版)提示升级项目.. 项目包括:asp.net mvc、数据库和silverlight。最佳答案通常，由不同版本的相
[解决方案]几种通过iproute2来打通不同节点间容器网络的方式
几种通过 iproute2 来打通不同节点间容器网络的方式几种通过 iproute2 来打通不同节点间容器网络的方式 host-gw ipip vxlan 背景之前由于需
【解决方案】基于数据库驱动的自定义TypeHandler处理器
目录前言 1、TypeHandler 简介 1.1转换步骤 1.2转换规则 2、JSON 转换 3、枚举转换 4、文章小结
【解决方案】Java互联网项目中常见的Redis缓存应用场景
目录前言 1、常见 key-value 2、时效性强 3、计数器相关 4、高实时性 5、排行榜系列 6、文章小结前言在笔者 3 年的
【解决方案】Java互联网项目中消息通知系统的设计与实现（下）
目录前言四、技术选型五、后端接口设计 5.1业务系统接口 5.2App 端接口六、关键逻辑实现 6.1Red
【解决方案】Java互联网项目中消息通知系统的设计与实现（上）
目录前言一、需求分析 1.1发送通知 1.2撤回通知 1.3通知消息数 1.4通知消息列表二、数据模型设计
【解决方案】多租户技术架构设计入门（一）
目录前言一、多租户的概念二、隔离模式 2.1独立数据库模式 2.2共享数据库独立数据架构 2.3共享数据库共享数据架构
【解决方案】MySQL中的死锁问题还能这样解决（文末送书）
导读：虽然锁在一定程度上能够解决并发问题，但稍有不慎，就可能造成死锁。本文介绍死锁的产生及处理。死锁的产生和预防发生死锁的必要条件有4个，分别为互斥条件、不可剥夺条件、请求与保持条件和循环等待条
javascript - 获取波斯月的最后一天 + 解决方案
在浏览网页后，我找不到任何功能来执行此操作，我有可行的个人解决方案。也许它对某人有用。 **使用 Moment 插件转换日期。***moment(currentPersianDate).clone()
检测数字手写的 OCR 解决方案？
是否有一种解决方案可以很好地处理数字(1-10)手写？我试过tesseract，但我得到的只是垃圾。理想情况下是 OSS，但商业也可以。最佳答案 OpenCV 现在带有手写数字识别 OCR 示例。
multithreading - Delphi死锁解释/解决方案
在服务器应用程序上，我们有以下内容:一个称为 JobManager 的单例类。另一个类，Scheduler，不断检查是否需要向 JobManager 添加任何类型的作业。当需要这样做时，调度程序会执
javascript - 用于在应用程序中处理和捕获错误的工具/解决方案
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。想改进这个问题？将问题更新为 on-topic对于堆栈溢出。 5年前关闭。 Improve this qu
r - 解决方案。有代理时如何install_github
当您尝试从 GitHub 存储库安装某些 R 包时 install_github('rWBclimate', 'ropensci') 如果您遇到以下错误: Installing github repo
WPF 字体模糊问题-解决方案
问题在以下链接中进行了描述和演示: Paul Stovell WPF: Blurry Text Rendering www.gamedev.net forum Microsoft Connect: W
用于科学记数格式格式化的 R 解决方案
我正在寻找一种解决方案，使用标准格式 a × 10 b 在科学记数法下格式化 R 中的数字。一些同行评审的科学期刊都要求这样做，并且手动修改图表可能会变得乏味。下面是 R 标准“E 表示法”的示例，
java - 如何从另一个java应用程序内部启动资源jar - 解决方案
已编辑解决方案(如下...) 我有一个启动画面，它被打包到它自己的 jar 中。它有效。我可以通过以下方式从另一个 java 应用程序内部调用 Splash.jar: Desktop.getDesk
用于创建门户的 .NET 解决方案
什么是创建像 PageFlakes 或 iGoogle 这样的门户网站的好框架/包？？我们希望创建一个为员工提供 HR 服务的员工/HR 门户，但我们也需要一种足够灵活的产品，以便我们可以使用它来为
用于科学记数格式格式化的 R 解决方案
我正在寻找一种解决方案，使用标准格式 a × 10 b 在科学记数法下格式化 R 中的数字。一些同行评审的科学期刊都要求这样做，并且手动修改图表可能会变得乏味。下面是 R 标准“E 表示法”的示例，
search - 解决方案+遗传
如何将 solr 与 heritrix 集成？我想使用 heritrix 归档一个站点，然后使用 solr 在本地索引和搜索该文件。谢谢最佳答案使用 Solr 进行索引的问题在于它是一个纯文本
jquery - 全日历工作时间 [解决方案]
完整日历不包含工作时间功能选项(在任何一天的议程 View 中选择第一行和最后一行 - 例如公司不工作)。我做到了类似的事情: viewDisplay: function(view){

首页

博学

6Ren·AI

商城

javascript - jQuery Content Slide(有效但正在寻找更简单的解决方案)