JS—点击链接切换隐藏的内容

最新推荐文章于 2023-11-20 09:23:51 发布

spfLinux

最新推荐文章于 2023-11-20 09:23:51 发布

阅读量575

点赞数

分类专栏： js 文章标签： js 内容切换

本文链接：https://blog.youkuaiyun.com/spfLinux/article/details/78224220

版权

js 专栏收录该内容

137 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a {
			cursor: pointer;
			color: red;
		}
		#p1, #p2 {
			display: none;
		}
	</style>
</head>
<body>
	<a οnclick="con(1)">显示内容1</a>
	<a οnclick="con(2)">显示内容2</a>

	<p id="p1">11111</p>
	<p id="p2">22222</p>
	<script>
		flag = "p1";

		function con(i){
			document.getElementById(flag).style.display = "none";
			document.getElementById("p" + i).style.display = "inline";
			flag = "p" + i;
		}
	</script>
</body>
</html>

//参数传递时传递字符串似乎有问题，这里采用的是数字

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

spfLinux

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 点击按钮实现隐藏显示切换效果 - JavaScript 技巧

CsCufft的博客

09-24

896

在上面的示例中，我们创建了一个按钮（id 为 “toggleButton”）和一个 div 元素（id 为 “content”），用于包裹要隐藏或显示的内容。如果内容元素当前显示，我们将其隐藏，并更新按钮的文本为 “切换显示”。在本文中，我将向您展示如何使用 JavaScript 创建一个按钮，以实现隐藏和显示元素的切换效果。在 “script.js” 文件中，我们将使用事件监听器来监听按钮的点击事件，并在每次点击时切换 div 元素的显示状态。在上面的代码中，我们首先获取了按钮和内容元素的引用。

JS实现点击链接切换显示隐藏内容的方法

10-19

主要介绍了JS实现点击链接切换显示隐藏内容的方法,涉及javascript鼠标事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

JS切换显示隐藏内容

qq_36155558的博客

02-24

483

假设鼠标滑过A元素（id ="a"）， B元素(id="b") 显示鼠标在A、B元素区域时 B元素一直显示鼠标离开A、B元素区域 B元素隐藏 $(document).ready(function(){ $('#a').hover(function() { $("#b").css('display', 'block');

js 点击切换显示隐藏状态

茉莉的博客

07-03

1026

html代码首先创建需要点击的 div 这里我用的是 li 标签 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/dz_center.css"> </head&

javascript点击按钮实现隐藏显示切换效果

10-22

主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下

JS实现点击循环切换显示内容的方法

10-19

在这篇文档中，主要介绍了如何使用JavaScript来实现点击事件触发页面内容的循环切换显示。这涉及到多个前端技术点，包括但不限于：鼠标事件的响应处理、页面元素的选择与获取、以及DOM属性的动态设置等。下面将详细...

JavaScript实现点击文字切换登录窗口的方法

10-24

本文讨论的是使用JavaScript实现点击文字切换登录窗口的方法。这种方式在现代网页设计中很常见，允许用户在同一个页面内通过点击不同的文字链接来切换显示不同的登录窗口。该技术利用了JavaScript操作DOM（文档对象...

JavaScript 实现 Tab 点击切换实例代码

10-20

用户可以通过点击不同的Tab项来切换和查看不同的内容区域。Tab切换通常涉及到多种效果，例如点击切换、滑动切换、延迟切换以及自动切换等。本文将聚焦于使用原生JavaScript实现点击切换Tab效果的基础实例。首先，...

JS实现点击显示/隐藏

qq_52006379的博客

08-23

5772

JS实现点击显示/隐藏。

JavaScript事件实现div显示和隐藏双向切换效果

m0_71752625的博客

11-20

323

我们通过定义flag=true，再通过if语句时其进去死循环从而实现显示和隐藏div模块的双向切换效果。

javascript 实现点击超链接变换图片

08-10

javascript 实现点击超链接变换图片 javascript 实现点击超链接变换图片

点击按钮（a标签）隐藏显示div内容，切换div内容

08-11

超级实用的点击隐藏，显示div内容，切换div内容点击按钮（a标签）

javascript和jquery实现页面元素显示/隐藏切换的方法

liaomingwu的专栏

01-06

4730

javascript和jquery实现页面元素显示/隐藏切换的方法

js点击按钮div显示隐藏

u010234868的专栏

06-12

8028

<input type="button" value="隐藏" id="btn"> <div id="box"></div> #box { width: 200px; height: 200px; background-color: red; } .show { display: block; } .hidden { display: none; } // 获取元素 var btn = document.getElementById('btn'); var

JS实现页面元素显示/隐藏切换的方法

yancie_的博客

07-23

1万+

实际开发中，有时候需要设置一个元素出事状态为隐藏，通过某一操作来实现显示和隐藏之间的切换，通过学习，将我目前掌握的显示和隐藏方法总结如下：一、通过原生JS实现 <html> <head> <meta charset="UTF-8"> <style> #div1{ ...

js点击实现显示和隐藏效果