你好,我有一个代码,标题是可点击的,然后出现段落,但是当我们转到它复制文本的文本时是什么。但我希望它可以点击,就像鼠标会变成手或其他东西一样。我在下面列出的代码。
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.text,
input {
display: none;
}
.active+.text {
display: block;
}
</style>
</head>
<body>
<h2>
<div>
<p style="font-family: DINpro; font-size: 24px;">Project Services ↓</p>
<div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
</div>
</h2>
<script>
var icons = document.getElementsByTagName('p');
for (var p = 0; p < icons.length; p++) {
icons[p].addEventListener('click', function() {
this.classList.toggle('active');
});
}
</script>
</body>
</html>
答案 0 :(得分:3)
我为您的标题文本添加了一个类来控制切换效果。并添加类似可点击的效果。
.clickable-header{
cursor: pointer;
}
以及类为“clickable-header”的标题元素
<p class="clickable-header" >
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.text,
input {
display: none;
}
.active+.text {
display: block;
}
.clickable-header{
cursor: pointer;
}
</style>
</head>
<body>
<h2>
<div>
<p class="clickable-header" style="font-family: DINpro; font-size: 24px;">Project Services ↓</p>
<div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
</div>
</h2>
<script>
var icons = document.getElementsByTagName('p');
for (var p = 0; p < icons.length; p++) {
icons[p].addEventListener('click', function() {
this.classList.toggle('active');
});
}
</script>
</body>
</html>
答案 1 :(得分:0)
要使光标变为手点击,您可以更新事件侦听器内的逻辑
icons[p].addEventListener('click', function() {
this.classList.toggle('active');
this.style.cursor = "pointer";
document.getElementsByClassName('text')[0].style.cursor = "pointer";
});
将您选择的元素的 style.cursor 属性设置为 pointer
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.text,
input {
display: none;
}
.active+.text {
display: block;
}
</style>
</head>
<body>
<h2>
<div>
<p style="font-family: DINpro; font-size: 24px;">Project Services ↓</p>
<div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
</div>
</h2>
<script>
var icons = document.getElementsByTagName('p');
for (var p = 0; p < icons.length; p++) {
icons[p].addEventListener('click', function() {
this.classList.toggle('active');
this.style.cursor = "pointer";
document.getElementsByClassName('text')[0].style.cursor = "pointer";
});
}
</script>
</body>
</html>
答案 2 :(得分:0)
你可以像这样使用CSS
<style>
p{
cursor: pointer;
width: max-content;
}
p:hover{
color:red;
}
</style>