JS判断当前URL对当前链接高亮显示

  • 2007-11-21
  • 分类：DOM, JavaScript
  • 作者：银子
  • 104 次查看

JS判断当前URL对当前链接高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class.

Demo:QQDANG

HTML

  1. <div id="nav">
  2. <ul>
  3. <li><a href="http://www.qqdang.net" title="首页">首　页</a></li>
  4. <li><a href="http://www.qqdang.net/smiles-qq-face/index.html" title="搞笑表情">搞笑表情</a></li>
  5. <li><a href="http://www.qqdang.net/emotion-qq-face/index.html" title="情感表情">情感表情</a></li>
  6. <li><a href="http://www.qqdang.net/animal-qq-face/index.html" title="动物表情">动物表情</a></li>
  7. <li><a href="http://www.qqdang.net/person-qq-face/index.html" title="人物表情">人物表情</a></li>
  8. <li><a href="http://www.qqdang.net/holiday-qq-face/index.html" title="节日表情">节日表情</a></li>
  9. <li><a href="http://www.qqdang.net/games-qq-face/index.html" title="游戏表情">游戏表情</a></li>
  10. <li><a href="http://www.qqdang.net/hot-qq-face/index.html" title="热门表情">热门表情</a></li>
  11. <li><a href="http://www.qqdang.net/classics-qq-face/index.html" title="经典表情">经典表情</a></li>
  12. <li><a href="http://www.qqdang.net/special-qq-face/index.html" title="表情专辑">表情专辑</a></li>
  13. <li><a href="http://www.qqdang.net/other-qq-face/index.html" title="其它表情">其它表情</a></li>
  14. </ul>
  15. </div>

JS

  1. var myNav = document.getElementById("nav").getElementsByTagName("a");
  2. for(var i=0;i<myNav.length;i++)
  3. {
  4.     var links = myNav[i].getAttribute("href");
  5.     //alert(links)
  6.     //alert(myNav[i]);
  7.     var myURL = document.location.href;
  8.  
  9.     if(myURL.indexOf(links) != -1)
  10.     {
  11.         myNav[i].className="d";
  12.     }
  13. }
Tags : , ,
1 条评论

JS 给文章所有段落后自动加上链接地址的三种方法

  • 2007-11-17
  • 分类：DOM, JavaScript
  • 作者：银子
  • 132 次查看

论坛上看到的问题

我用DOM方法做了一个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.test {color:#369;margin-left:18px;}
</style>
</head>
<body>
<p>在看第二个图，如果你全选后准备拷贝这些文字，就会发现在每一段后面都躲了一段字符，而这段字符在“图1”中是隐藏起来的，只有当你选择后才能显现出来。</p>
<p>如上图，这是正常阅读文章的状态，一切显示正常</p>
<p>如上图，这是正常阅读文章的状态，一切显示正常</p>
<script>
function test()
{
var myP = document.getElementsByTagName("p");
for(var i=0;i<myP.length;i++)
{
var createLink = document.createElement("a");
createLink.setAttribute("class","test");
createLink.setAttribute("href","http://www.qqdang.net/blog/");
createLink.setAttribute("target","new");
var createText = document.createTextNode("http://www.qqdang.net/blog/");
createLink.appendChild(createText);
myP[i].appendChild(createLink);
}
}
window.onload = function() {test();}
</script>
</body>
</html>

另外两位板油的答案

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    <script type="text/javascript">
window.onload=function(){
var brs=document.getElementsByTagName("br");
for(var i=0;i<brs.length;i++){
var txt=document.createTextNode("http://www.hansir.cn");
document.body.insertBefore(txt,brs[i]);
}
}
</script>
 </HEAD>
 <BODY>
 中华人民共和国中华人<br />民共和国中华人民共和国中华人民共和国中华人民共和<br />国中华人民共和国中华人民共和国中华人民共和国<br />中华人民共和国中华人民共和国中华人民共和国中<br />华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国<br />
 </BODY>
</HTML>

用正则的方法，相当简练

<script>
window.onload=function(){
document.body.innerHTML=document.body.innerHTML.replace(/<\/(p|P)>/igm,'<font color="#ffffff">http://www.web0.cn/</font></p>');
}
</script>
<body>
<p>看看~~~</p>
<p>选上看看~~~~~</p>
</body>
Tags : ,
2 条评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志