用html生成一个选择就诊人的指向标志的div
时间: 2024-03-27 21:39:57 浏览: 13
以下是一个简单的选择就诊人的指向标志的 `div` 示例,你可以根据需要进行修改:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择就诊人</title>
<style>
.arrow {
position: relative;
display: inline-block;
padding: 10px;
}
.arrow::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
.options {
display: none;
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
}
.options ul {
list-style: none;
margin: 0;
padding: 0;
}
.options li {
padding: 5px;
cursor: pointer;
}
.options li:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="arrow">
选择就诊人
<div class="options">
<ul>
<li>就诊人1</li>
<li>就诊人2</li>
<li>就诊人3</li>
</ul>
</div>
</div>
<script>
var arrow = document.querySelector('.arrow');
var options = document.querySelector('.options');
arrow.addEventListener('click', function() {
if (options.style.display === 'none') {
options.style.display = 'block';
} else {
options.style.display = 'none';
}
});
options.addEventListener('click', function(e) {
arrow.innerHTML = e.target.innerHTML;
options.style.display = 'none';
});
</script>
</body>
</html>
```
在这个页面中,我们使用了一个 `div` 元素来包含选择就诊人的指向标志和就诊人选项。我们使用了 CSS 来创建指向标志,以及用于隐藏选项的样式。当用户点击指向标志时,我们使用 JavaScript 来切换选项的可见性。当用户选择一个选项时,我们更新指向标志的文本,并隐藏选项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)