JavaScript&CSS实现div选中_vue中单选框怎么实现功能资源-CSDN文库

共2个文件

png：1个

html：1个

需积分: 38 133 浏览量 2022-07-12 15:42:09 上传评论 1 收藏 7KB ZIP 举报

在网页开发中，JavaScript 和 CSS 是两种至关重要的技术，它们分别负责动态交互和样式设计。当我们需要实现一个div（一种常见的HTML元素，用于定义独立的布局区域）的选中效果时，JavaScript通常用来处理用户的交互逻辑，而CSS则用于设置选中状态下的视觉样式。下面我们将详细探讨如何通过这两者优雅地实现div的选中效果。我们来讨论CSS部分。在CSS中，我们可以创建一个类（class）来表示选中状态。例如，我们可以定义一个名为`.selected`的类，设置其背景色、边框等样式，以便在div被选中时应用这些样式。以下是一个简单的例子： ```css .selected { background-color: #ADD8E6; /* 浅蓝色 */ border: 2px solid #000; /* 黑色边框 */ outline: none; /* 移除默认的焦点轮廓 */ } ``` 接下来是JavaScript部分。当用户点击div时，我们需要检测这个事件并更新div的class。这通常可以通过添加事件监听器来完成。假设我们的div有一个唯一的ID，如`myDiv`，我们可以这样编写JavaScript代码： ```javascript document.getElementById('myDiv').addEventListener('click', function() { this.classList.toggle('selected'); }); ``` 以上代码为div添加了一个点击事件监听器。当用户点击div时，`toggle`方法会切换`.selected`类的激活状态。如果div已经处于选中状态，`toggle`会移除此类；反之，如果div未被选中，它会添加此类，从而改变div的样式。在实际项目中，我们可能需要处理更复杂的情况，比如多选或者有层次结构的div。这时，我们可以用数组存储已选中的div，并在点击时检查当前点击的div是否已经在数组中。如果不在，就将其添加到数组中，并添加选中样式；如果在，就从数组中移除，并移除选中样式。此外，考虑到无障碍性（accessibility），在实现选中效果时，我们还应该考虑键盘导航。例如，用户可以使用Tab键在页面元素间切换，并通过空格键进行选中。这需要我们使用`tabindex`属性让div可聚焦，并添加`keydown`事件监听器来响应空格键。结合以上内容，我们可以看到，通过JavaScript和CSS，我们可以优雅地实现div的选中效果，提供良好的用户体验和视觉反馈。在实际应用中，还要根据具体需求进行调整，例如添加动画效果、优化性能、处理边界情况等。文件"选中DIV.html"可能包含了这些实现的代码，而"微信截图_20220712154038.png"可能是选中效果的示例截图，可以作为参考。

资源详情

资源评论

资源推荐

收起资源包目录

div选中效果.zip （2个子文件）

选中DIV.html 5KB

微信截图_20220712154038.png 6KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app" v-cloak> <div id="options"> <div class="title"> <el-checkbox :indeterminate="isIndeterminate" v-model="isCheckAll" @change="checkAll"> 全选 </el-checkbox> </div> <div class="buttons" v-for="(item, index) in allOptions" :id="item" :key="index" @click="checkSingle"> {{item}} <div class="select-border" v-show="checkedOptions.indexOf(item) != -1"> <span class="select-border-text">✓</span> </div> </div> </div> </div> <style> /** vue需要在引入element-ui之前引入 **/ [v-cloak] { display: none; } #options { width: 220px; display: flow-root; } .title { margin: 8px 0 0 10px; font-size: 15px; } .buttons { position: relative; margin: 3px 6px 5px 4px; text-align: center; width: calc(50% - 10px); float: left; line-height: 40px; background-color: #edeff7; cursor: pointer; } .select-border { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 32px solid #1890ff; border-left: 32px solid transparent; } .select-border-text { position: absolute; top: -40px !important; right: 2px; color: #fff; } </style> </body>  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>  <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function () { return { visible: false, isIndeterminate: false, isCheckAll: false, allOptions: ["选项1", "选项2", "选项3", "选项4", "选项5", "选项6", "选项7",], checkedOptions: ["选项1", "选项2",], } }, methods: { // 全选或者全不选 checkAll (isAll) { this.isCheckAll = isAll this.isIndeterminate = false let buttons = document.getElementById('options').children for (let i = 1; i < buttons.length; i++) { let displayStatus = buttons[i].children[0].style.display if (isAll) { // 选中所有 if (displayStatus == "block") { continue } else { buttons[i].children[0].style.display = 'block' } } else { // 全部不选 if (displayStatus == "none") { continue } else { buttons[i].children[0].style.display = 'none' } } } if (isAll) { this.selectLayers = this.filterLayers } else { this.selectLayers = [] } }, // 选中单个选项 checkSingle (event) { let target = event.currentTarget let id = target.id // 获取当前div元素的选中状态 let element = target.children[0] let showStatus = element.style.display // 控制图层的显隐 if (showStatus == "none") { element.style.display = 'block' this.checkedOptions.push(id) } else { element.style.display = 'none' this.checkedOptions = this.checkedOptions.filter(ele => ele != id) } // 判断是否全选或者全不选 let children = target.parentElement.children let blockCount = 0, noneCount = 0; let tempSelectLayer = [] debugger for (let i = 1; i < children.length; i++) { let displayStatus = children[i].children[0].style.display if (displayStatus == "none") { noneCount++ } else { blockCount++ } } // 更新“全选”checkbox的状态 if (blockCount > 0 && noneCount > 0) { // 部分选中，部分不选 this.isCheckAll = false this.isIndeterminate = true } else if (blockCount > 0 && noneCount == 0) { // 全部选中 this.isCheckAll = true this.isIndeterminate = false } else if (blockCount == 0 && noneCount > 0) { // 全部不选 this.isCheckAll = false this.isIndeterminate = false } else { return } } } }) </script> </html>