通过js实现选择按钮出现不同内容

最新推荐文章于 2024-04-15 08:33:14 发布
最新推荐文章于 2024-04-15 08:33:14 发布
阅读量9.4k 收藏 25
点赞数 6
文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37771093/article/details/80485638
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<button type="button"  style="color: salmon" οnclick=show1()>哥哥</button>
<button type="button"   οnclick=show2()>弟弟</button>
<div style="display: block" id="teachers">
I am a students
</div>
    <div style="display: none" id="students">
        I will be better
    </div>



</body>
<script type="text/javascript">
    function show1(){

        document.getElementById("teachers").style.display="block";

        document.getElementById("students").style.display="none";

    }

    function show2(){

        document.getElementById("teachers").style.display="none";

        document.getElementById("students").style.display="block";

    }
</script>
</html>

5024
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
JS实现移动端点击按钮复制文本内容
10-16
本文通过实例代码给大家介绍了移动端点击按钮复制文本内容 ，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
javascript 单击按钮出现文本内容
热门推荐
Medlen
09-23 2万+
单击按钮出现文本内容 function myfunction() { var x="Have fun!" document.getElementById("demo").innerHTML=x; } 点击这里
javascript实现点击后变换按钮显示文字的方法
10-24
主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下
js中点击不同的按钮对应的选择框出现不同的内容
bug_404的博客
02-27 3610
1：css样式：button{ width: 50px; height: 40px; } .wrapper div { display: none; width: 100px; height: 100px; border: 2px solid red; } .active{ background-color: #2df2ff; }2：...
JavaScript中的Button对象
jojo3777的专栏
10-22 1428
Button.onFocus  Button.onFocus() 支持脚本：JavaScript 1.1+ ， JScript1.0+ ，Nav 3+ ，IE 3+ 语法：onFocus()="函数或者命令" 说明：onFocus()事件在标签中定义。功能是处理按钮获得焦点时应进行的操作。 例子：当按钮1获得焦点时，显示一个提示框。             Button.onCli
js实现按钮之间的多种选择
java2database的博客
11-15 173
实现如图所示的效果： 区别checkbox中的 checked 属性 在js中的复制属性值问题。checked = true or checked =“checked”；   代码如下所述： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...
js实现简单的按钮选择
weixin_53104165的博客
01-18 1090
JavaScript实现简单的按钮选择 功能分析：四个按钮，全选，全不选，全选和全不选结合，反选。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮练习</title> <script> window.onload = function () { let cbs =
JavaScript中按钮点击事件的几种实现方式
jsjxyinghan的博客
05-26 9049
对于方法二，一定要把script代码块写在body的尾部，但是如果说硬是要写在head标签内的话，一定要在window.load里面，或者在jq的另一种写法$(document).ready()。这个是代码执行顺序的原因。btn.addEventListener('click',function() {alert('你点击了按钮哦！')},false);alert("你点击了按钮哦！alert("你点击了按钮哦");alert("你点击了按钮哦！
JS按钮点击多次触发多次不同的事件
奔跑的橙子
04-10 4451
关于JS多次触发不同事件的按钮，有三种方法效果。 第一种： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>奔跑的橙子学习JS</title> </head> <body> <h1 id="bt"&gt...
用js实现选项卡，点击不同按钮显示执行不同的操作
psjasf1314的博客
04-12 3502
内容描述：通过不同的按钮显示不同的页面，用js实现。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用js实现选项卡</title> <style> /*class的css写法*/ .active { background-color: gold;
JS实现的radio图片选择按钮效果
01-19
用JS实现的radio图片选择按钮效果。注意：input后面的空格。用到的图片： 用JS实现的radio图片选择按钮效果-软件开发网 .lanrentuku img{border:1px solid #008800;} 用JS实现的radio图片选择按钮...
js实现点击按钮出现flash动画.rar
07-05
演示地址：http://down.admin5.com/demo/code_pop/4/115/
使用原生js实现点击按钮展示不同状态内容
m0_46577631的博客
11-21 556
使用原生js实现点击按钮展示不同状态内容
点击不同单选按钮出现不同内容
qq_33205354的博客
05-12 1万+
就我个人来说，我要实现的东西是，审核某个东西，如果通过则不需要填写理由，如果审核不通过则需要填写理由，出现一个文本域&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="js/jquery.min
原生js 点击一个按钮 让复选框来回切换
dreamy_wx的博客
08-25 783
<input type="checkbox" id="inputs"> <button id="btn">按钮</button> window.onload = function () { var btn = document.getElementById('btn'); var flag = false; var num = 0; //第一种方式
JavaScript网页中点击按钮切换显示的内容
烧烤摊摊主蔡文磊的烧烤摊
07-17 1万+
前言: 最近在制作官网的过程中遇到了一个网页前端开发中比较普遍的需求, 点击不同的按钮 页面上的内容随之更换, 并且按钮的背景颜色也要呈现为被选中的样式. 以此文记录一下我自己对于该需求的满足方法, 如果有更好的方案欢迎留言讨论. 本文字数: 阅读时间: **效果图如下所示: ** 可以看到, 这里我们有四个板块: [产品描述], [产品特征], [详情图示], [重要参数], 点击按钮后, 按...
用JavaScript实现点击不同的单选按钮出现不同的内容
xiazaikk_2009的博客
04-19 2505
在网页中，通过选择不同的单选按钮，来控制页面上显示不同的内容。要实现这个功能，方法有很多种，个人觉得下面的方法比较好用（试验证明），虽然繁琐些，但思路清楚，简单易懂。 ~~~~~~~~~~~~~~~~~我是分割线~~~~~~~~~~~~~~~~~~~~~ index.jsp: ...... &lt;input type="radio" id="ok1" value="ok1" chec...
html点击单选框显示不同的内容,用JS实现点击不同的input单选按钮出现不同的内容...
weixin_39532466的博客
06-04 2275
js:type="text/javascript">function aCheck1(){document.getElementById("span1").style.display="block";document.getElementById("span2").style.display="none";}function bCheck2(){document.getElementById("...
用html写文本变形动画
最新发布
liulang68的博客
04-15 485
【代码】用html写文本变形动画。
js通过添加按钮，实现更改文字内容
06-09
可以通过以下步骤来实现： 1. 在HTML中添加一个按钮和一个文本框，例如： ```html <input type="button" value="更改" onclick="changeText()"> <input type="text" id="text"> ``` 2. 在JavaScript中编写一个函数来更改文本内容，例如： ```javascript function changeText() { var newText = document.getElementById("text").value; // 获取文本框中的值 document.getElementById("content").innerHTML = newText; // 将值赋给需要更改的文本元素 } ``` 3. 在HTML中添加需要更改的文本元素，例如： ```html <p id="content">这里是原始文本内容</p> ``` 这样，当点击按钮时，就会调用changeText()函数来获取文本框中的值，并将其赋给需要更改的文本元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值