点击按钮,显示隐藏内容,点击隐藏内容,内容隐藏

html:

<div class="box">领取红包</div>
<p class="main on">恭喜您获得300元红包抵用券</p>

css:

.box{width: 100px;height: 30px;background: #FA6A2F;text-align: center;line-height: 30px;border-radius: 10px;cursor: pointer;color: #fff;}
.on{display: none;}

js:

$(function() {

    $(‘.box‘).on(‘click‘,
    function() {
        var o = $(‘.main‘);
        o.removeClass(‘on‘);
    })

    $(‘.main‘).on(‘click‘,
    function() {
        var o = $(‘.main‘);
        o.addClass(‘on‘);
    })
})
时间: 2024-12-28 08:44:05

点击按钮,显示隐藏内容,点击隐藏内容,内容隐藏的相关文章

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

点击按钮显示谷歌地图

原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

JavaScript点击按钮显示 确认对话框

//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My First Script</title> <script type=&q

JavaScript点击按钮显示确认对话框

//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My First Script</title> <script type=&q

安卓TextView限定行数最大值,点击按钮显示所有内容

问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前三行?   2,textview在未完全渲染前无法拿到实际的属性. 解决思路: 写好布局文件,隐藏展开按钮 填充数据,判断数据是否塞满前三行 根据上一步的判断结果,选择隐藏和显示展开按钮 具体步骤: 布局文件此处省略,很简单只有一个TextView和一个Button,并设置Button隐藏. 首先,

点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层

按钮点击显示隐藏层(再次点击按钮则隐藏层关闭): HTML部分: <button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button> <div id="hidden" style="display:none">我是隐藏层.</div> JS部分: <script type='te

js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>

JavaScript DOM案例点击按钮显示隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <

Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框

实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚焦点击的显示框. 第三是点击编辑框外的地方,隐藏编辑框. 一二点都是在startPipeLineNameEdit这个method中去实现. 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否.(PipeLin

点击按钮显示或隐藏图片

<!-- 一种简单的方法 jquery的show/hide也可以 或者jquery中的toggleClass()方法 --> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击显示或隐藏图片</title> <style> .show{ display: block; } .hide