如何实现高亮当前选择---已解决但又出现新的问题！求解？

Question

不明白你要干什么,target="_self",点玩以后页面都换了,还什么高亮不高亮的.
_blank还差不多.
另外你说的id和link里的数字相同,不久高亮吗?那4个数字不都相同么?如果只是想搞显示选择,那么每个a都加上onclick事件
比如<a href="xxxx/xxx/116.html" target="_blank" onclick="clear_all();this.parentNode.class='red';">
<script language="Javascript">
function clear_all() {
    var obj=document.getElementById("left").getElementsByTagName("li"),j=obj.length
    for (var i=0;i <j;i++)
        obj[i].className=""
    } 
}
</script>

Answer 1

谢谢 runffer_yang 的回复我想达到的效果是：这里有四个html文件：116.html    16.html    1.html    6.html    每个html文件的左边一列是相同的，都是文章的标题。右边一列是相应文章的内容。<div id="left">  //左边一列每个Html都是相同的。
  <ul> 
    <li id="116"> <a href="xxx/xxx/116.html" target="_self">title_1 </a> </li> 
    <li id="16"> <a href="xxx/xxx/16.html" target="_self">title_2 </a> </li> 
    <li id="2"> <a href="xxx/xxx/2.html" target="_self">title_3 </a> </li> 
    <li id="3"> <a href="xxx/xxx/3.html" target="_self">title_4 </a> </li> 
  </ul> 
</div> 
<div id="right">文章标题对应的内容</div>   //右边这一列每个Html都是不同的。
</body>             （target="_self"  是不想新开一个窗口，在原窗口打开就可以了。）当我点击title_1 时，则116.html中<li id="116"> 高亮显示
当我点击title_2 时，则16.html中<li id="16"> 高亮显示
当我点击title_3 时，则1.html中<li id="1"> 高亮显示
当我点击title_4 时，则6.html中<li id="6"> 高亮显示

Answer 2

总算弄明白了
<script language="javascript">
<!--
onload=function(){
    var sa=location.href.split("/")
    var str=sa[sa.length-1]
    var str = sa.substring(0, sa.indexOf("."));
    var obj=document.getElementById("left").getElementsByTagName("li"),j=obj.length
    for (var i=0;i <j;i++)
        if (str==obj[i].id) obj[i].className="red"
        else obj[i].className=""
}
//--> 
</script>

Answer 3

<style> 
.red a{color:red} 
</style> 
<div id="left"> 
  <ul> 
    <li id="116.html"> <a href="xxx/xxx/116.html" target="_self">title1 </a> </li> 
    <li id="1.html"> <a href="xxx/xxx/1.html" target="_self">title2 </a> </li> 
    <li id="16.html"> <a href="xxx/xxx/16.html" target="_self">title3 </a> </li> 
    <li id="6.html"> <a href="xxx/xxx/6.html" target="_self">title4 </a> </li> 
  </ul> 
</div>
<div id="right">显示对应内容 </div> 
<script language="javascript"> 
<!-- 
onload=function(){ 
    var sa=location.href.split("/") 
    var str="@"+sa[sa.length-1] 
    var obj=document.getElementById("left").getElementsByTagName("li"),j=obj.length 
    for (var i=0;i <j;i++) 
        if (str.indexOf("@"+obj[i].id)!=-1)obj[i].className="red" 
        else obj[i].className="" 
} 
//--> 
</script> 

Answer 4

楼上的还是没有把116和1区分出来
@116.html
@1，@116的indexOf都!=1把.html去掉直接比较就行了。

Answer 5

呵呵
<li id="1.html">没有：@1
请测试一下麻^_^

Answer 6

谢谢两位的回复 runffer_yang 的代码不能实现 .  见：http://10488.kfkf.net/ru/1.html caiying2009 第二次的代码可以实现效果。但正如runffer_yang 所说无法区分 116和1 。。 见：http://10488.kfkf.net/cp/1.html 我想要的效果是 http://10488.kfkf.net/ok/65.html 所示（代码为caiying2009第二次提供）。但只能是一些不同的数字，如果是形如116  16  1  6   这样的数字就不行了。希望能再帮忙修改一下代码，谢谢！
 
 

Answer 7

try:    <li id="77">
    <li id="83"> 
    <li id="157">
    <li id="65">-->
 
    <li id="77.html">
    <li id="83.html">
    <li id="157.html">
    <li id="65.html">

Answer 8

但是.html是CMS自动生成的啊,去掉感觉怪怪的。请问不去掉.html可以实现吗？

Answer 9

try:
http://10488.kfkf.net/ok/65.html 
中:
id="77"
id="83"
id="157">
id="65">改成
id="77.html"
id="83.html"
id="157.html"
id="65.html"

Answer 10

(">"没去掉,重发)
try: 
http://10488.kfkf.net/ok/65.html 
中: 
id="77" 
id="83" 
id="157"
id="65" 改成 
id="77.html" 
id="83.html" 
id="157.html" 
id="65.html" 

Answer 11

已修改 http://10488.kfkf.net/ok/65.html 可以实现所要效果

Answer 12

可以再试试^_^
    <li id="116.html"> <a href="xxx/xxx/116.html" target="_self">title1 </a> </li> 
    <li id="1.html"> <a href="xxx/xxx/1.html" target="_self">title2 </a> </li> 
    <li id="16.html"> <a href="xxx/xxx/16.html" target="_self">title3 </a> </li> 
    <li id="6.html"> <a href="xxx/xxx/6.html" target="_self">title4 </a> </li> 

Answer 13

终于可以成功了，非常感谢 caiying2009 的帮助！贪心点问：能不能不加<li id="116.html"> <a href="xxx/xxx/116.html" target="_self">title1 </a> </li> 如果li不加.html可以实现？

Answer 14

<style> 
.red a{color:red} 
</style> 
<div id="left"> 
  <ul> 
    <li id="116"> <a href="xxx/xxx/116.html" target="_self">116.html </a> </li> 
    <li id="1"> <a href="xxx/xxx/1.html" target="_self">1.html </a> </li> 
    <li id="16"> <a href="xxx/xxx/16.html" target="_self">16.html </a> </li> 
    <li id="6"> <a href="xxx/xxx/6.html" target="_self">6.html </a> </li> 
  </ul> 
</div>
<div id="right">显示对应内容 </div> 
<script language="javascript"> 
<!-- 
onload=function(){ 
    var sa=location.href.split("/") 
    var str="@"+sa[sa.length-1] 
    var obj=document.getElementById("left").getElementsByTagName("li"),j=obj.length 
    for (var i=0;i <j;i++) 
        if (str.indexOf("@"+obj[i].id+".html")!=-1)obj[i].className="red" 
        else obj[i].className="" 
} 
//--> 

Answer 15

补充:
之所以:
<li id="116.html"> 
是为了JS自动生成时自定义ID方便,同时方便后面的处理
--例如本问题扩展:<li id="111/116.html"> <a href="xxx/111/116.html" target="_self">116.html </a> </li> 
<li id="222/116.html"> <a href="xxx/222/116.html" target="_self">116.html </a> </li> 
<li id="333/116.html"> <a href="xxx/333/116.html" target="_self">116.html </a> </li> 
<li id="444/116.html"> <a href="xxx/444/116.html" target="_self">116.html </a> </li> 

Answer 16

明白了，这两天在 caiying2009 的帮助下学了很多，非常感谢！