js实现点击切换文字

最新推荐文章于 2024-06-12 16:26:06 发布
最新推荐文章于 2024-06-12 16:26:06 发布
阅读量1.4w 收藏 19
点赞数 6
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33205354/article/details/80292284
版权

点击实现文字的切换，通常用在商品的收藏

<p id="btn" οnclick="changeVal(this);" >展开</p>

<script>    
function changeVal(obj){
    var val=document.getElementById("btn");
    if(val.innerHTML=="展开"){
        obj.innerHTML="收缩";
    }else if(val.innerHTML=="收缩"){
        obj.innerHTML="展开";
    }
}

</script>

又或者简单点的

<p οnclick="javascript:this.innerHTML=(this.innerHTML=='更多'?'收起':'更多');">更多</p>


qq_33205354
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript点击切换文字
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 551
JavaScript点击切换文字
html自动切换文字,JS实现自动切换文字的导航效果代码
weixin_42511887的博客
05-31 1423
本文实例讲述了JS实现自动切换文字的导航效果代码。分享给大家供大家参考。具体如下：这里介绍支持自动切换文字的导航菜单效果，实际上看上去并不像菜单，猛一看倒像是一个Select下拉框，两侧带有箭头控制按钮，点击左侧则向上切换菜单文字，点击右侧则切换到一个菜单项内容，也可自动切换，鼠标不点击的时候菜单会自动变化文字。运行效果截图如下：在线演示地址如下：具体代码如下：变化的文字导航条变化的文字导航条.s...
js点击切换文字
qq_40435659的博客
05-03 4221
// javascriptvar a = document.getElementsByTagName('a')[0]a.addEventListener('click',function(){    if(a.innerText == '123'){a.innerText = '456'}    else{a.innerText = '123'}},false) // jQuery$('a').c...
JavaScript 动态网页实例 —— 文字显示
cccloveforever的博客
05-18 1121
本文章继续介绍文字效果。本章主要介绍文字显示特效，主要包括:文字的随机显示，打字效果的实现，UBB代码的实现，文字“右一左”顺序排列的实现，古汉语文字排版的实现，以及蒙古族文字排版的实现。其中，文字的“右一左”顺序排列和古汉语文字排版也可以单独使用 HTML实现，应用到的JavaScript技术不多，本文章只提供一种用 JavaScript 实现的思路。
【纯原生JS】点击内容块切换实现
weixin_44382872的博客
06-12 409
实现，点击上方按钮，下面内容进行切换展示。纯html、js实现点击切换功能。
纯js实现点击切换内容
hhazjyh5210的博客
08-11 3882
js实现点击切换，排他思想
JavaScript点击切换文字事件
Junnix的博客
01-05 3615
JavaScript点击切换文字事件 <h1 id="hhh">哈哈哈哈哈哈</h1> <script> var and=document.getElementById("hhh") alert("aaaaa") </script>
web中js实现点击切换图片
qq_43399648的博客
05-18 4125
这个也是一种，底部带文字 用到了隐藏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; co...
js实现鼠标点击切换文字样式并添加下划线
qq_45991812的博客
09-01 1704
【代码】js实现鼠标点击切换文字样式并添加下划线。
JavaScript实现点击文字切换登录窗口的方法
10-24
主要介绍了JavaScript实现点击文字切换登录窗口的方法,涉及javascript操作div层及相关样式的技巧,需要的朋友可以参考下
JS实现的文字与图片定时切换效果代码
10-23
主要介绍了JS实现的文字与图片定时切换效果代码,可实现定时切换及鼠标点击切换两种效果,涉及JavaScript鼠标事件控制页面样式的相关技巧,需要的朋友可以参考下
原生JS实现隐藏显示图片 JS实现点击切换图片效果
12-12
在本文中，我们将深入探讨如何使用原生JavaScript来实现一个简单的图片显示与隐藏以及图片切换的功能。这个功能包括两个按钮，分别标记为“显示”和“换”，以及一张可显示或隐藏的图片。以下是实现这一功能的关键...
JS实现点击链接切换显示隐藏内容的方法
10-19
通过这种方式，我们可以轻松实现点击链接切换显示隐藏内容的功能。当然，这只是一个基础示例，实际应用中可能需要考虑更多的交互细节，如动画效果、防止重复点击等。同时，为了使代码更健壮和可维护，可以考虑使用类...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
html实现鼠标点击切换图片和文字
06-11
可以通过以下HTML和JavaScript代码实现鼠标点击切换图片和文字： ```html <!DOCTYPE html> <title>Click to Change <p id="myText">Text 1 var img = document.getElementById("myImg"); var...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值