jquery 点击切换值

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.8.3.min.js"></script>
        <style>
            .show_div {
                background: red;
                color: #fff;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
            }
        </style>
    </head>

<body>
        <div class="show_div">我要点击</div>
        <input type="button" id="inp"  value="33333" />
   
<script type="text/javascript">
  $(function () {

$("#inp").toggle(
      function(){
        $(".show_div").html("我要显示出来！");
        $(this).val("33333");
      },
      function(){
        $(".show_div").html("我隐藏！");
     $(this).val("5555");
      });
    });
</script>
    </body>
  
</html>

时间： 2024-10-29 14:46:56

jquery 点击切换值的相关文章

jquery点击切换diam封装

//点击切换 $(function(){ $(".nav-left ul li").click(function(){    //点击切换1 tabChange($(this),$(".forum-container > div")); //内容选项卡 }) $(".dynamic-title ul li ").click(function(){            //点击切换2 tabChange($(this),$(".d

jquery点击缩略图切换视频播放的视频切换焦点图效果

一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器,每个缩图对应一个视频片段,视频电影站推荐使用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示出来,再如果这个条目的类型和上一个条目的类型不一样,就让这个条目的标题显示出来,否则,就隐藏标题,  这样我们就做到了每种类型只有第一个数据标题显示出来 接着,在Listview的外层(也就是MainActivity的布局文件中),默认放一个标题(下面都称作是主标题) 最后,设置右边Listview

解决基于JQ焦点图快速点击切换按钮图片显示错误的问题

之前用原生js做过焦点图,今天突然想用JQ做一下,但是遇到一个问题,当我不停点击切换按钮时,由于不停触发animate动画,导致图片显示错乱的问题,解决办法第一想到的就是点击切换后立刻解绑事件,然后动画函数运行完再添加事件,但是 ....用 $('.box').unbind('click'); 解绑后,再把原有事件添加回来却没有办法添加回来 $("button").bind("click",function(){ //函数体 }); 这样?可是函数体里没法写 ,可能

基于jQuery左右滑动切换特效 附源码

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: 1 <div class="bodyCon08"><!--学员--> 2 <div class="students"> 3 4 <div id="four_flash"> 5 <div class="flashB

JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子,但是苦于没有找到一些好的平台来展示这些JS效果.今天发现了RunJS这个分享代码的平台,迫不及待得想跟大家分享. 在浏览各大商城网站的时候,或者某些网站的首页,都会展示与本网站相关的一些实时切换的图片, 本文就给大家分享一个用jQuery实现图片自动切换的例子. 主页核心代码(Default.aspx): <!DOCTYPE html> <html> <head> <meta http-equiv="Conten

JavaScript和JQuery获取DIV的值

1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

jquery 点击显示隐藏的三种方法

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <!-- 收缩展开效果 --><li class=&

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><