<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 600px;
background: #CCC;
position: absolute;
padding: 50px 100px;
}
p{
width: 70%;
height: 300px;
background: #fff;
float: left;
font-size: 14px;
line-height: 25px;
padding: 30px;
}
ul{
list-style: none
}
li{
float: left;
width: 50px;
height: 30px;
font-size: 16px;
line-height: 30px;
text-align: center;
cursor: pointer;
border-radius: 3px;
}
#list{list-style:none;float:right;font-size:16px;line-height:30px;height:30px;width:50px;color:#333;}
#list li{background:#999;}
#lis{display:none;}
#lis li{background:#aaa;}
#list ul li:hover{background:#F60;color:#fff;}
#tab{float:left;border:15px solid #666;padding:5px 10px;width:400px;height:100px;margin-top:10px;}
hr{background-color:#F60;height:2px;clear:both;}
#tab{display:none;}
#tab ul .selected{background:#F60;color:#fff;}
.selected{display:block;}
#search,#replace{display:none;}
span{background:yellow;}
</style>
</head>
<body>
<div id="box">
<p>
1969年1月,我到文安驿公社接北京知青。就是在这个时候,我第一次见到了近平。当时,梁家河派了十几个年轻力壮的社员去接知青。怕人手不够,我们还牵了毛驴,帮着驮行李。知青们的行李有铺盖卷,有箱子,我们轮流帮着拿行李,你拿一气儿,我拿一气儿,几十个人,浩浩荡荡地就回到村里来了。我记得很清楚,当时梁家河村一共来了十五名北京知青,十一名男知青,四名女知青。当时梁家河村委会接待室是一队的地方,分来五名男知青,四名女知青;近平和其余五名男知青在后面的二队。村里当时安排我父亲给二队的知青做饭。
</p>
<ul id="list">
<li>展开
<ul id="lis">
<li>查找</li>
<li>替换</li>
</ul>
</li>
</ul>
<div id="tab">
<ul>
<li>查找</li>
<li>替换</li>
</ul>
<hr/ >
<div id="search">
<input type="text" />
<input type="button" value="查找">
</div>
<div id="replace">
<input type="text" />
<input type="text" />
<input type="button" value="替换">
</div>
</div>
</div>
<script>
window.onload=function(){
var list=document.getElementById('list');
var listLi=list.getElementsByTagName('li')[0];
var lis=document.getElementById('lis');
var li=lis.getElementsByTagName('li');
var tab=document.getElementById('tab');
var oLi=tab.getElementsByTagName('li');
var div=tab.getElementsByTagName('div')
var oinput=div[0].getElementsByTagName('input');
var ainput=div[1].getElementsByTagName('input');
var op=document.getElementsByTagName('p')[0];
listLi.onclick=function(){
lis.style.display='block';
}
for (var i = 0; i < li.length; i++) {
change(oLi);
change(li);
}
var text=op.innerHTML;
// console.log(op.innerHTML);
oinput[1].onclick=function(){
var str=oinput[0].value;
// console.log(op);
if(op.innerHTML.indexOf(str)==-1){
alert("没有找到文字");
}else if(str==""){
alert("请输入文字");
}
op.innerHTML=text;
op.innerHTML=op.innerHTML.split(str).join('<span>'+str+'</span>');
}
ainput[2].onclick=function(){
var str=ainput[0].value;
var newstr=ainput[1].value;
if(op.innerHTML.indexOf(str)==-1){
alert("没有找到文字");
}else if(str==""){
alert("请输入文字");
}
op.innerHTML=text;
op.innerHTML=op.innerHTML.split(str).join('<span>'+newstr+'</sapn>');
}
function change(obj){
obj[i].index=i;
obj[i].onclick=function(){
tab.style.display='block';
for (var i = 0; i < li.length; i++) {
oLi[i].className="";
div[i].style.display='none';
}
oLi[this.index].className="selected";
div[this.index].style.display='block';
}
}
}
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 600px;
background: #CCC;
position: absolute;
padding: 50px 100px;
}
p{
width: 70%;
height: 300px;
background: #fff;
float: left;
font-size: 14px;
line-height: 25px;
padding: 30px;
}
ul{
list-style: none
}
li{
float: left;
width: 50px;
height: 30px;
font-size: 16px;
line-height: 30px;
text-align: center;
cursor: pointer;
border-radius: 3px;
}
#list{list-style:none;float:right;font-size:16px;line-height:30px;height:30px;width:50px;color:#333;}
#list li{background:#999;}
#lis{display:none;}
#lis li{background:#aaa;}
#list ul li:hover{background:#F60;color:#fff;}
#tab{float:left;border:15px solid #666;padding:5px 10px;width:400px;height:100px;margin-top:10px;}
hr{background-color:#F60;height:2px;clear:both;}
#tab{display:none;}
#tab ul .selected{background:#F60;color:#fff;}
.selected{display:block;}
#search,#replace{display:none;}
span{background:yellow;}
</style>
</head>
<body>
<div id="box">
<p>
1969年1月,我到文安驿公社接北京知青。就是在这个时候,我第一次见到了近平。当时,梁家河派了十几个年轻力壮的社员去接知青。怕人手不够,我们还牵了毛驴,帮着驮行李。知青们的行李有铺盖卷,有箱子,我们轮流帮着拿行李,你拿一气儿,我拿一气儿,几十个人,浩浩荡荡地就回到村里来了。我记得很清楚,当时梁家河村一共来了十五名北京知青,十一名男知青,四名女知青。当时梁家河村委会接待室是一队的地方,分来五名男知青,四名女知青;近平和其余五名男知青在后面的二队。村里当时安排我父亲给二队的知青做饭。
</p>
<ul id="list">
<li>展开
<ul id="lis">
<li>查找</li>
<li>替换</li>
</ul>
</li>
</ul>
<div id="tab">
<ul>
<li>查找</li>
<li>替换</li>
</ul>
<hr/ >
<div id="search">
<input type="text" />
<input type="button" value="查找">
</div>
<div id="replace">
<input type="text" />
<input type="text" />
<input type="button" value="替换">
</div>
</div>
</div>
<script>
window.onload=function(){
var list=document.getElementById('list');
var listLi=list.getElementsByTagName('li')[0];
var lis=document.getElementById('lis');
var li=lis.getElementsByTagName('li');
var tab=document.getElementById('tab');
var oLi=tab.getElementsByTagName('li');
var div=tab.getElementsByTagName('div')
var oinput=div[0].getElementsByTagName('input');
var ainput=div[1].getElementsByTagName('input');
var op=document.getElementsByTagName('p')[0];
listLi.onclick=function(){
lis.style.display='block';
}
for (var i = 0; i < li.length; i++) {
change(oLi);
change(li);
}
var text=op.innerHTML;
// console.log(op.innerHTML);
oinput[1].onclick=function(){
var str=oinput[0].value;
// console.log(op);
if(op.innerHTML.indexOf(str)==-1){
alert("没有找到文字");
}else if(str==""){
alert("请输入文字");
}
op.innerHTML=text;
op.innerHTML=op.innerHTML.split(str).join('<span>'+str+'</span>');
}
ainput[2].onclick=function(){
var str=ainput[0].value;
var newstr=ainput[1].value;
if(op.innerHTML.indexOf(str)==-1){
alert("没有找到文字");
}else if(str==""){
alert("请输入文字");
}
op.innerHTML=text;
op.innerHTML=op.innerHTML.split(str).join('<span>'+newstr+'</sapn>');
}
function change(obj){
obj[i].index=i;
obj[i].onclick=function(){
tab.style.display='block';
for (var i = 0; i < li.length; i++) {
oLi[i].className="";
div[i].style.display='none';
}
oLi[this.index].className="selected";
div[this.index].style.display='block';
}
}
}
</script>
</body>
</html>