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

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

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

下面的代码可以正常工作，但我想知道是否有更简化的代码可以用于所有这些 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/

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

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

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

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

delphi - 寻找 EOutOfResources
题: 是否有一种简单的方法可以获取正在运行的应用程序中泄漏的资源类型列表？ IOW 通过连接到应用程序？我知道 memproof 可以做到，但它会减慢速度，以至于应用程序甚至无法持续一分钟。大多数任
c# - 寻找.net核心的容器的stdout和stderr
正确地说下面的代码会将自定义日志发送到.net核心中的Docker容器的stdout和stderr吗？ console.Writeline(...) console.error(..) 最佳答案如果
java - 寻找 for 循环中动态变量声明的解决方法
我想将一个任务多次重复，放入 for 循环中。我必须将时间序列对象存储为 IExchangeItem ， openDA 中的一个特殊类(数据同化软件)。这是任务之一(有效): HashMap ite
c++ - 寻找，相对或绝对位置？
我需要从文件中读取一个数组。该数组在文件中不是连续排序的，必须跳转“偏移”字节才能获得下一个元素。假设我读取一个非常大的文件，什么更有效率。 1) 使用增量相对位置。 2)使用绝对位置。选项 1:
c++ - 寻找 MSIHANDLE
我有一个安装程序(使用 Advanced Installer 制作)。我有一个必须与之交互的应用程序，但我不知道如何找到该安装的 MSIHANDLE。我查看了 Microsoft 引用资料，但没有发现
javascript - 寻找。正则表达式中的字符问题
我在替换正则表达式中的“joe.”等内容时遇到问题。这是代码 var objects = new Array("joe","sam"); code = "joe.id was here so was
c++ - 寻找 child
我有 A 类。A 类负责管理 B 对象的生命周期，它包含 B 对象的容器，即 map。，每个 B 对象都包含 C 对象的容器，即 map .我有一个全局 A 对象用于整个应用程序。我有以下问题:我
android - 寻找 FreeImage.so
任何人都可以告诉我在哪里可以找到 freeImage.so 吗？我一直在努力寻找相同的东西但没有成功..任何帮助将不胜感激。我已经尝试将 freeimage.a 转换为 freeImage .so 并
python - 寻找 assertURLEquals
在单元测试期间，我想将生成的 URL 与测试中定义的静态 URL 进行比较。对于此比较，最好有一个 TestCase.assertURLEqual 或类似的，它可以让您比较两个字符串格式的 URL，如
c++ - “寻找”优化
'find ./ -name *.jpg' 我正在尝试优化上述语句的“查找”命令。在查找实现中处理“-name”谓词的方法。 static boolean pred__name __common (
python - 寻找()函数？
请原谅我在这里的困惑，但我已经阅读了关于 python 中的 seek() 函数的文档(在不得不使用它之后)，虽然它帮助了我，但我仍然对它的实际含义有点困惑，任何非常感谢您的解释，谢谢。最佳答案关
c# - 寻找 boolean 语句的解释
我在我正在使用的库中找到了这个语句。它应该检查集群中的当前节点是否是领导者。这是语句:(!(cluster.Leader?.IsRemote ?? true)) 为什么不直接使用 (cluster.L
java - 寻找 JsonParser 依赖
我发现 JsonParser 在 javax.json.stream 中，但我不知道在哪里可以找到它。谁能帮帮我？ https://docs.oracle.com/javaee/7/api/javax
security - 寻找 Web 服务安全漏洞的真实故事
关闭。这个问题需要更多focused .它目前不接受答案。想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 6年前关闭。 Improve this questi
jenkins - 寻找 Jenkins 插件以允许每个分支的默认参数值
如果 git 存储库中有新的更改可用，我有一个多分支管道作业设置为每分钟由 Jenkinsfile 构建。如果分支名称是某种格式，我有一个将工件部署到环境的步骤。我希望能够在每个分支的基础上配置环境，
uml - 寻找 Harel 状态图工具
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
coldfusion - 寻找 cfdump 的替代方案
我想我刚刚意识到当他们不让我使用 cfdump 时我的网络主机是多么的限制。这其实有点让我生气，真的，dump 有什么害处？无论如何，我的问题是是否有人编写了一个 cfdump 替代方案来剔除复杂类型
rest - 寻找 RESTful 方法来更新具有相同字段集的多个资源
任务:我有多个资源需要在一个 HTTP 调用中更新。要更新的资源类型、字段和值对于所有资源都是相同的。示例:通过 ID 设置了一组汽车，需要将所有汽车的“状态”更新为“已售出”。经典 RESTF
sql - 寻找 SQL 中的性能改进
场景:表中有 2 列，数据如下例所示。对于“a”列的相同值，该表可能有多个行。在示例中，考虑到“a”列，“1”有三行，“2”有一行。示例表“t1”: |a|b ||1|1.1||1|1.2||1
python - 寻找 Pandas 最长的连续增长
我有一个数据框: Date Price 2021-01-01 29344.67 2021-01-02 32072.08 2021-01-03 33048.03 2021-01-04 32084.

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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