第三次点击在前两次之外添加下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12345612345</title>
<style>
.ud {
text-decoration: underline;
}
.textselect{
color: blue;
font-weight:bold;
}
.textnoselect{
color: black;
font-weight:normal;
text-decoration:none;
}
</style>
<script>
window.onload = function(){
var pNode = document.querySelector('p');
var lastClickNode =null;
pNode.onclick = function(e){
var target = e.target;
if(target.tagName.toLowerCase() === 'p') return;
var parentNodeArr = Array.prototype.slice.call(target.parentNode.children);
if(!lastClickNode) {
parentNodeArr.every(function(v){
v.className = "";
return true;
});
target.className = 'ud';
lastClickNode = target;
} else {
var lastIndex = parentNodeArr.indexOf(lastClickNode),
currentIndex = parentNodeArr.indexOf(target);
var min = Math.min(lastIndex, currentIndex),
max = Math.max(lastIndex, currentIndex);
for(var i = min; i <= max; i++){
parentNodeArr[i].className = 'ud ';
parentNodeArr[min].className = 'ud , textselect';
parentNodeArr[max].className = 'ud , textselect';
}
lastClickNode = null;
}
}
}
</script>
</head>
<body>
<p style="text-align:center;"><a id="1" >how </a>
<a id="2" >are </a>
<a id="3" >you </a>
<a id="4" >how </a>
<a id="5" >are </a>
<a id="6" >you </a>
<a id="7" >how </a>
<a id="8" >are </a>
<a id="9" >you </a>
<a id="10">how </a>
<a id="11">are </a>
<a id="12">you </a>
<a id="13">how </a>
<a id="14">are </a>
<a id="15">you </a>
<a id="16">how </a>
<a id="17">are </a>
<a id="18">you </a>
<a id="19">how </a>
<a id="20">are </a>
<a id="21">you </a>
</p>
</body>
<html>
Eddiewang0回答
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery