开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 点击来回切换

在JavaScript中实现点击来回切换的功能，通常涉及到事件监听和状态管理。以下是一个基础的示例，展示了如何通过点击按钮来切换一个元素的显示状态。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Example</title>
    <style>
        #toggleElement {
            display: none;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle</button>
    <div id="toggleElement">This is the element to toggle.</div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('toggleButton');
    const toggleElement = document.getElementById('toggleElement');

    toggleButton.addEventListener('click', function() {
        if (toggleElement.style.display === 'none' || toggleElement.style.display === '') {
            toggleElement.style.display = 'block';
        } else {
            toggleElement.style.display = 'none';
        }
    });
});

解释

HTML部分:
- 创建一个按钮和一个需要切换显示状态的元素。
- 使用CSS初始设置元素的显示状态为none，即隐藏状态。

JavaScript部分:
- 在文档加载完成后，获取按钮和需要切换的元素。
- 为按钮添加点击事件监听器。
- 在点击事件中，检查元素的当前显示状态。如果是隐藏状态（none）或未设置（''），则将其设置为显示状态（block）。否则，将其设置为隐藏状态（none）。

优势

简单易懂：代码逻辑清晰，易于理解和维护。
灵活性高：可以轻松扩展到更复杂的切换逻辑，例如切换多个元素、添加动画效果等。

应用场景

导航菜单：点击按钮显示或隐藏导航菜单。
模态框：点击按钮显示或隐藏模态框。
选项卡切换：点击不同的选项卡切换显示不同的内容区域。

可能遇到的问题及解决方法

元素初始状态不正确：
- 确保在CSS中正确设置了元素的初始显示状态。

事件监听器未正确绑定：
- 确保在文档加载完成后绑定事件监听器，或者将脚本放在文档底部。
样式冲突：
- 检查是否有其他CSS样式影响了元素的显示状态，可以使用浏览器的开发者工具进行调试。

通过以上方法，你可以实现一个简单的点击来回切换功能，并根据需要进行扩展和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery点击图片来回切换功能

在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。下面是一个小的demo示例： js...所以换个demo 实现一下jQuery点击图片来回切换功能 js...kg; //这里的感叹号是取反的意思，如果你没有写，当你点击切换回第一张图片时，就会不生效 })

9.4K2 0

小程序实现页面多级来回切换支持滑动和点击操作

height: 100vh; overflow: scroll; margin: 12rpx 0rpx; background: white; font-size: 28rpx; } js...hideModal:false//遮罩层 }, 部分完整js代码： // pages/leftSlide/leftSlide.js const App = getApp() Page(...that.setData({ currentTab:e.detail.current }); that.checkCor(); }, // 点击标题切换当前页时改变样式...-- 切换 --> <!...({ currentTab:e.detail.current }); that.checkCor(); }, // 点击标题切换当前页时改变样式

44111 0

JS点击切换背景图

JS点击切换背景图效果演示概述本文讲解如何实现一个比较好看的功能，通过点击可以自由的切换屏幕的背景。...cursor: pointer; } .pic img { width: 100px; } JS...循环注册事件给每一张图片添加事件 for (var i = 0; i < imgs.length; i++) { // 当点击的时候会发生将这张图片本身赋值给当前文件...循环注册事件给每一张图片添加事件 for (var i = 0; i < imgs.length; i++) { // 当点击的时候会发生将这张图片本身赋值给当前文件

721 0

点击导航栏，切换div内容（js+css+html）

12.7K2 0

JavaScript 实现 Tab 点击切换

Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 JavaScript 来实现 Tab 点击切换的效果功能实现...Nian糕css 部分div { display: none; width: 155px; height: 100px; border: 1px solid #000;}接下来是 JS...给元素绑定点击事件//第一个按钮的点击事件btnList[0].onclick = function () { btnList[0].style.color = "#fff"; btnList[0]...divList[1].style.display = "none"; divList[2].style.display = "block"; }现在我们已经实现了一个 Tab 切换的效果了...，来看一下效果虽然很简陋，但已经达到我们想要的效果了，读者可根据自己想要的样式来设置 CSS，接下来我们要做的就是，对 JS 代码进行优化优化a.

4.2K2 0

vue列表点击切换颜色

black; text-align:center; } .box{ width:160px; padding:20px; color:red; text-align:center; } JS

2.4K1 0

js+css 鼠标点击按钮切换图片效果制作

利用js代码和css代码制作一个图片切换效果点击目标按钮切换相应的描述或图片 image.png 点击按钮切换图片代码： js lt-ie9 lt-ie8 lt-ie7"> js lt-ie9 lt-ie8"> js lt-ie9"> js">

16.1K2 0

Vue点击切换样式

先看效果图这里直接是上代码 <template>

<li :class="[index == status ? 'bechoice...

2.1K2 0

Android 实现图片点击切换

R.drawable.swift, R.drawable.ajax, R.drawable.html, }; //用于图片切换

5.3K1 0

jQuery实现点击开关图片切换

原型大概是这样的 image 需求：点击右侧的蓝色眼睛，会变成关键代码： /* 实现图片切换 */ $(".imgclick").toggle(function(){ $(this).attr("...function(){ $(this).attr("src","img/open.png"); }).attr("src","img/open.png"); 其实原理很简单，就是利用toggle的参数切换不同函数...charset="UTF-8"> js... /* 实现图片切换

9.1K3 0

左右点击切换tab标签的实现

演示：代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

3K1 0

手机点击按钮进行切换图片

// 给buttonOne赋值，设置布局文件中的Button按钮id进行关联 buttonOne = findViewById(R.id.one); // 绑定点击事件...activity> 页面效果点击可自行下载

3.5K2 0

小程序滑动、点击切换简洁UI

开发遇到了，就简单的记录下，小程序滑动或者点击切换样式这里不做演示了，直接上代码 wxml 内容2 js...1) % 2; this.setData({ currentIndex: currentPageIndex, }) } }, //点击...//拿到当前索引并动态改变 currentIndex: e.currentTarget.dataset.idx }) }, }) 需要写的代码放在内容1替换即可，即可实现轻松的点击或者滑动切换窗口...，js数据交互统一处理即可，同一加载只是显示的排版布局而已，其他一样的

2922 0

(1724) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换

如果我们生产环境和开发环境中的相关路径不一样，那我们就得在两个环境中来回切换，这时我们就得修改之前的路径配置方式。 ...以前的路径配置： var website ={ publicPath:"http://localhost:1818/" } 3.1 实现在生产环境和开发环境中来回切换的配置实质为运行不同的指令..."dev":"set type=dev&webpack", "build": "set type=build&webpack" }, 3.1.2 修改webpack.config.js...可以在webpack.config.js用下面的输出语句 console.log( encodeURIComponent(process.env.type) ); ? ? ?

7912 0

jQuery点击切换增加和删除class类

$(".text").click(function () { if ($(this).parent().hasClass("se...

3.7K1 0

Activity 切换动画---点击哪里从哪放大

emmmm，这次来梳理一下 Activity 切换动画的研究。首先，老规矩，看一下效果图：效果图 ?...效果图.gif 这次要实现的动画效果就是类似于上图那样，点击某个 view，就从那个 view 展开下个 Activity，Activity 退出时原路返回，即缩放到点击的那个 view。...首先来说说，要给 Activity 的切换写动画的话，可以通过什么来实现？...对 5.0+ 动画有所了解的话，示例中的动画应该有个名称叫：共享元素切换动画。...也就是说，放大动画开始时，新 Activity 是从点击 View 的宽高作为起始放大至全屏，返回时从全屏缩小至点击 View 的宽高。

4K5 0

iOS-HQSliderView点击不同Button切换tableViewCell

自定义的点击Button切换不同TableViewCell，效果如图所示 HQSliderView.gif HQSliderView.gif 使用教程： 2.1 导入HQSliderView

1.7K7 0

【demo50】背景图点击切换

KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> 背景图点击切换...-- 两个button 控制图片上一张下一张切换 --> js..., 0.23); height: 70vh; width: 70vw; position: relative; overflow: hidden; } .slide { /* 未切换至该图片前...} .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } script.js

9362 0

Js常见点击跳转方式

在原有的页面跳转 window.location.href='next.html' 返回上一页 window.history.back(-1) top跳转 to...

15.2K1 0

ClipBoard.js点击复制

DOCTYPE html> ClipBoard.js点击复制 js/2.0.0/clipboard.min.js">

15.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭