把浏览器的div的可点击性隐藏掉的方法

把浏览器的input的可点击性隐藏掉的方法

目录

1.在input控件中加入disabled="disabled" 

2.在input控件中加入disabled="disabled" 


1.在input控件中加入disabled="disabled" 

代码:

 <input type="text" name="plannernam7e" id="plannername7" value="44}" disabled="disabled" >    

效果,不能修改和不能编辑了。背景变成灰色了。

2.在input控件中加入disabled="disabled" 

代码:

 <input type="text" name="plannernam7e" id="plannername7" value="修改" readonly >    

效果,不能修改和不能编辑了。背景不变。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 HTML/CSS/JavaScript 示例,实现了两个垂直的滑块,点击标签时可以隐藏或者显示滑块。你可以在浏览器中打开它,查看效果。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑块示例</title> <style> .container { display: flex; flex-direction: row; height: 100vh; } .slider-container { display: flex; flex-direction: column; flex: 1; background-color: #EEE; overflow-y: auto; padding: 10px; } .slider-header { display: flex; justify-content: space-between; align-items: center; background-color: #CCC; padding: 10px; cursor: pointer; } .slider-header:hover { background-color: #AAA; } .slider-content { display: flex; flex-direction: column; align-items: center; background-color: #FFF; padding: 10px; transition: all 0.3s ease-out; } .slider-content.hidden { height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .slider-content.visible { height: auto; opacity: 1; padding-top: 10px; padding-bottom: 10px; } </style> </head> <body> <div class="container"> <div class="slider-container"> <div class="slider-header" onclick="toggleSlider(1)"> <h2>标签1</h2> <span>+</span> </div> <div class="slider-content" id="slider1"> <p>滑块1的内容。</p> </div> <div class="slider-header" onclick="toggleSlider(2)"> <h2>标签2</h2> <span>+</span> </div> <div class="slider-content" id="slider2"> <p>滑块2的内容。</p> </div> </div> </div> <script> function toggleSlider(sliderId) { var slider = document.getElementById("slider" + sliderId); var header = slider.previousElementSibling; if (slider.classList.contains("hidden")) { slider.classList.remove("hidden"); slider.classList.add("visible"); header.lastElementChild.innerText = "-"; } else { slider.classList.remove("visible"); slider.classList.add("hidden"); header.lastElementChild.innerText = "+"; } } </script> </body> </html> ``` 这个示例中,用 `<div>` 元素实现了滑块容器和滑块头部,用 `<h2>` 元素实现了标签,用 `<span>` 元素实现了展开/收起按钮。滑块内容可以放任何 HTML 元素,它们的高度会自动适应内容。 CSS 中使用了 Flexbox 布局实现了滑块容器和滑块的垂直排列,以及滑块内容的垂直居中。同时使用了 `overflow-y: auto` 属使得滑块容器可以滚动。 JavaScript 中使用了 `getElementById` 方法获取滑块元素和按钮元素,使用了 `classList` 属切换滑块的可见,并动修改按钮的文本和样式。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值