`
kingfly8888
  • 浏览: 6496 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

jquery点击按钮显示及隐藏元素

jQueryCiscoMicrosoftHPJavaScript 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            ul {
                width: 250px;
                height: 290px;
                font-size: 16px;
                font-family: "Blackadder ITC";
                color: #22dddd;
                background-color: #123456;
            }
           
            .highlight {
                color: red;
            }
           
            #btn {
                width: 60px;
                height: 20px;
                font-size: 13px;
                text-align: center;
                position: absolute;
                margin: 0 0 0 30px;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $all=$("#all li:gt(5)");
                $("#btn").click(function(){
                    if($all.is(":hidden")){
                        $all.hide().show("fast");
                        $("#btn").val("big");
                        $("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
                    }else{
                        $all.show().hide("fast");
                        $("#btn").val("small");
                        $("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
                    }
                });
            })  ;                         
                               
                   
        </script>
    </head>
    <body>
        <ul id="all">
            <li>
                lenovo
            </li>
            <li>
                dell
            </li>
            <li>
                hp
            </li>
            <li>
                microsoft
            </li>
            <li>
                sun
            </li>
            <li style="display:none;">
                cisco
            </li>
            <li style="display:none;">
                intel
            </li>
            <li style="display:none;">
                amd
            </li>
            <li style="display:none;">
                canno
            </li>
            <li style="display:none;">
                apple
            </li>
            <li style="display:none;">
                ibm
            </li>
            <li style="display:none;">
                acer
            </li>
            <li style="display:none;">
                sony
            </li>
            <li style="display:none;">
                toshiba
            </li>
            <li style="display:none;">
                sumsung
            </li>
        </ul>
        <input type="button" id="btn" value="small"/>
    </body>
</html>





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            ul {
                width: 250px;
                height: 290px;
                font-size: 16px;
                font-family: "Blackadder ITC";
                color: #22dddd;
                background-color: #123456;
            }
           
            .highlight {
                color: red;
            }
           
            #btn {
                width: 60px;
                height: 20px;
                font-size: 13px;
                text-align: center;
                position: absolute;
                margin: 0 0 0 30px;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $all = $("#all li:gt(5)");
                $("#btn").toggle(function(){
                    $all.hide().show("fast");
                    $("#btn").val("big");
                    $("#all li").filter(":contains('canno'),:contains('microsoft')").addClass("highlight");
                }, function(){
                    $all.show().hide("fast");
                    $("#btn").val("small");
                    $("#all li").filter(":contains('canno'),:contains('microsoft')").removeClass("highlight");
                });
            });
        </script>
    </head>
    <body>
        <ul id="all">
            <li>
                lenovo
            </li>
            <li>
                dell
            </li>
            <li>
                hp
            </li>
            <li>
                microsoft
            </li>
            <li>
                sun
            </li>
            <li style="display:none;">
                cisco
            </li>
            <li style="display:none;">
                intel
            </li>
            <li style="display:none;">
                amd
            </li>
            <li style="display:none;">
                canno
            </li>
            <li style="display:none;">
                apple
            </li>
            <li style="display:none;">
                ibm
            </li>
            <li style="display:none;">
                acer
            </li>
            <li style="display:none;">
                sony
            </li>
            <li style="display:none;">
                toshiba
            </li>
            <li style="display:none;">
                sumsung
            </li>
        </ul>
        <input type="button" id="btn" value="small"/>
    </body>
</html>




toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

下面说一下toggle(fn,fn)方法的使用，效果是：每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一 元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发 调用函数的功能，不需要另外.click(fn)了


分享到：
评论
8 楼 interjc 2011-02-11  
为啥投不了新手帖？
7 楼 borglee 2011-02-11  
不是 这是？？我没明白。。。为什么发这个上来呢？
6 楼 redstarofsleep 2011-02-09  
厄。。。
LZ能把代码整理下吗。。。。。
5 楼 zxd277254942 2011-02-09  
我承认。。。我手jian......
4 楼 lioncin 2011-02-08  
看得眼花缭乱的

3 楼 ghyghoo8 2011-02-06  
这个也能上首页？！感叹了
2 楼 EldonReturn 2011-02-06  
想给几个建议：
1. 代码贴得希望能够整齐些。全蓝的看着眼花。
2. 函数封装希望能够更加独立些。应独立于特定应用，不应与html，CSS等混杂。
1 楼 attol 2011-02-05  
最近有很多帖子想投隐藏
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery点击按钮隐藏父页和引用页的iframe

    在网页开发中，有时我们需要实现一种交互效果，即在用户点击特定按钮时，隐藏嵌入在页面中的`iframe`元素。这种效果对于提高用户体验、控制页面布局或在多页面交互场景下尤为有用。本篇文章将深入讲解如何使用`...

    点击元素以外的地方隐藏元素插件

    "点击元素以外的地方隐藏元素插件"，即clickOutHide，是一个基于jQuery的插件，专门用于实现一种交互效果：当用户点击页面上除特定元素之外的任何地方时，该特定元素将自动隐藏。这个插件为开发者提供了一个灵活且...

    jQuery点击按钮弹出窗口动画特效.zip

    4. **弹出窗口的创建与控制**：弹出窗口可能是一个模态对话框或者简单的div元素，通过CSS定位和jQuery的显示/隐藏方法控制其可见性。例如，`.show()`和`.hide()`方法用于控制元素的显示与隐藏，`.fadeIn()`和`....

    简单的jQuery点击按钮弹出侧边导航栏代码

    引入jQuery库后，我们可以编写JavaScript代码来监听按钮点击事件，并根据需要显示或隐藏侧边栏。 ```javascript $(document).ready(function() { $("#toggleBtn").click(function() { $("#sidebar")....

    极简单高效兼容jquery两个按钮点击隐藏或显示两个不同对象_jmjjp制作整理

    在本文中，我们将深入探讨如何使用jQuery实现两个按钮来控制两个不同对象的隐藏与显示，这一功能具有良好的浏览器兼容性，包括IE8及以上版本以及360等主流浏览器。这个功能由jmjjp制作整理，旨在提供一种简洁、高效...

    jquery点击按钮显示广告5秒自动消失

    在“jquery点击按钮显示广告5秒自动消失”这个场景中，我们将探讨如何使用 jQuery 实现这样的功能，同时也会涉及到 JavaScript 的基本原理以及 ECMAScript 相关知识。 首先，我们需要一个 HTML 页面作为基础结构，...

    jQuery点击图标按钮弹出表单代码

    接下来，我们要编写jQuery脚本来处理按钮点击事件，并控制表单的显示与隐藏。在`&lt;script&gt;`标签中或者外部的`script.js`文件中添加以下代码： ```javascript $(document).ready(function() { $("#open-form").click...

    jQuery下载按钮点击加载代码.zip

    当用户点击按钮时，对应的JavaScript函数会被执行，该函数可能包含控制进度条显示和隐藏、模拟加载进度以及显示下载完成提示的逻辑。 5. **动画和进度模拟**：为了模拟加载过程，开发者可能使用了CSS3的`animation`...

    jQuery css3点击按钮展开图标菜单动画代码

    在这个示例中，当用户点击按钮时，菜单会根据`.hidden`类的添加或移除来显示或隐藏。同时，由于我们设置了CSS3的`transition`和`transform`，菜单的显示和隐藏会伴随有平滑的动画效果。 以上就是使用jQuery和CSS3...

    jQuery制作顶部浮动层显示隐藏点击图标按钮浮动展开

    本教程将详细讲解如何利用jQuery技术制作一个在页面顶部浮动的层，该层可以通过点击图标按钮进行显示和隐藏。这个功能在网页设计中常见于顶部导航栏或通知区域，为用户提供方便快捷的交互体验。 首先，我们需要理解...

    jQuery点击按钮图片模向滑动

    标题中的“jQuery点击按钮图片模向滑动”指的是使用jQuery库来实现的一种交互效果，当用户点击特定按钮时，图片会在水平方向上进行平滑、连续的滚动，以展示一系列图片。这种效果常用于网站的轮播图或者产品展示区域...

    jquery点击显示 隐藏事件

    本文将围绕一个具体的案例来详细介绍如何利用jQuery实现点击按钮后显示或隐藏某个`&lt;div&gt;`元素的功能。 #### 核心知识点详解 1. **HTML结构** 首先，我们来看一下页面的基本结构： ```html ;"&gt; ;"&gt;显示 ...

    完美的鼠标放上去jquery显示隐藏层

    这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停（hover）时动态显示或隐藏元素的技巧。这种技术能够使用户在浏览网页时更加直观地获取信息，比如悬停在某个按钮或链接上时，弹出相关的提示信息。 ...

    jQuery点击滑动显示分享按钮代码.zip

    在这个案例中，jQuery被用来处理用户点击事件，实现分享按钮的滑动显示和隐藏。 2. **CSS3**：CSS3是CSS的最新版本，提供了更多的样式和动画效果。在这个项目中，CSS3被用来设计按钮的样式，以及实现平滑的滑动动画...

    jQuery实现按钮滑动切换

    这个方法可以实现元素的滑动显示和隐藏。在`$(document).ready()`函数中，我们可以绑定点击事件到按钮上： ```javascript $(document).ready(function() { $('#button1').click(function() { $('#content1')....

    jquery返回顶部隐藏按钮.rar

    在本案例中，我们讨论的是如何使用jQuery实现一个可隐藏的返回顶部按钮。jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作等任务，使得开发动态网页变得更加容易。 "jquery返回...

    Jquery 点击按钮显示和隐藏层的代码

    这个例子中，我们看到的是一个使用jQuery库实现的简单功能，即点击按钮显示和隐藏层。以下是详细的知识点解析： 1. **jQuery库**：jQuery 是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...

    jQuery点击显示弹出框关闭按钮代码.zip

    本资源"jQuery点击显示弹出框关闭按钮代码.zip"包含了一个利用jQuery实现的弹出框功能，该功能在用户点击某个元素时显示一个弹出框，并且弹出框内带有关闭按钮。下面我们将详细探讨相关的jQuery知识和实现步骤。 ...

    【JavaScript源代码】jQuery实现HTML元素隐藏和显示.docx

    // 隐藏元素显示 $("li:gt(5):lt(6)").show(); // 更新按钮样式和文本 $(".showmore a span").css("background", "url(img/up.gif) no-repeat 0 0"); $(".showmore a span").text("显示部分语言"); } else { ...

    jquery ajax实例点击按钮触发Ajax loading

    在上述代码中，`id="ajaxButton"`是我们的触发按钮，而`id="loadingIndicator"`则是用于显示加载指示器的元素，初始状态为隐藏。 现在，编写JavaScript代码来处理按钮点击事件，并执行AJAX请求： ```javascript $...

Magicbox
Global site tag (gtag.js) - Google Analytics