27
2013-11

js选项卡及如何用js获取a标签的链接并改变该链接背景色

       最近忙客户的事情,需要对课程分类做修改,实现用户停留在当前页面,当前页面所在的文字链接同事出现一个背景色,研究了一下,就把实例写下来:

       demo【点击访问

<!--课程分类部分-->
<style type="text/css">
.anniu{width:70px; height:25px; background:#ccc; font-size:14px; margin-left:10px; border-radius:5px; float:left; line-height:25px; text-align:center; cursor:pointer; color:#000;}
.anniu1{width:70px; height:25px; background:#da3c3d; font-size:14px; margin-left:10px; border-radius:5px; float:left; line-height:25px; text-align:center; cursor:pointer;color:#fff;}
.astyle{background:#da3c3d; vertical-align:middle;color:#fff;}
</style>
<script src="http://www.eeworld.com.cn/training/js/loopedslider.min.js" type="text/javascript"></script>
<script>
function qiehuandy(id) {
  for(var i=1;i<=2;i++){
    if(id==i){
   document.getElementById('tabdy'+i).style.display = 'block';
   document.getElementById('dy'+i).className= 'anniu1';
    }else{
   document.getElementById('tabdy'+i).style.display = 'none';
   document.getElementById('dy'+i).className= 'anniu';
}
  }
}
        
function qiehuandlp(id) {
  for(var i=1;i<=2;i++){
    if(id==i){
   document.getElementById('tabdlp'+i).style.display = 'block';
   document.getElementById('dlp'+i).className= 'anniu1';
    }else{
   document.getElementById('tabdlp'+i).style.display = 'none';
   document.getElementById('dlp'+i).className= 'anniu';
}
  }
}
        
function changebg(id){
    var num=document.getElementById("link").getElementsByTagName('a').length;
    for(var i=1;i<=num;i++){
    if(id==i){
    document.getElementById('link'+i).className= 'astyle';
    }
    else{
    document.getElementById('link'+i).className= '';
    }
    }
}
        
window.onload=function(){
    var Href=window.location.href; 
    var num=document.getElementById("link").getElementsByTagName('a').length;
    var url=document.getElementById("link").getElementsByTagName('a');
    for(var i=0;i<=num;i++){
        urls=url[i];
        if (Href==urls)
        {
            document.getElementById('link'+(i+1)).className= 'astyle';
        }
        else{
            document.getElementById('link'+(i+1)).className= '';
        }
    }
}
</script>
<tr>
<td align="right">
<table cellpadding="0" cellspacing="0" border="0" width="310" height="150" align="left" id="link">
<!--电源课程开始-->
<tr>
<td align="left" style="height:16px; font-size:14px;color:#000; font-weight:bold; padding-left:20px; border-bottom:1px dashed #ccc; padding-bottom:5px;">电源课程列表</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="310" align="right">
<tr><td style="padding-left:20px;padding-top:5px;" height="25"><span class="anniu1" onclick="qiehuandy('1')" id="dy1">精品课</span><span class="anniu" onclick="qiehuandy('2')" id="dy2">公开课</span></td></tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="310" align="right" id="tabdy1" style="display:block">
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/TI_power_0902/336.html" target="_blank" id="link16" onclick="changebg(16)">电路保护基础</a></td>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/TI_power_0227/8.html" target="_blank" id="link17" onclick="changebg(17)">降压稳压器架构</a></td>
</tr>
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/TI_power_0826/335.html" target="_blank" id="link18" onclick="changebg(18)"> 电池电量监测基础知识</a></td>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2012/TI_power_1121/11.html" target="_blank" id="link19" onclick="changebg(19)">线性稳压器基础知识</a></td>
</tr>
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/TI_power_0625/292.html" target="_blank" id="link20" onclick="changebg(20)">环路补偿很容易</a></td>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2012/TI_power_0927/13.html" target="_blank" id="link21" onclick="changebg(21)">DC-DC基础知识</a></td>
</tr>
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/TI_power_0520/275.html" target="_blank" id="link22" onclick="changebg(22)">开关电源组件选择</a></td>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/TI_power_0412/16.html" target="_blank" id="link23" onclick="changebg(23)">开关电源基础知识</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="310" align="right" style="display:none;" id="tabdy2">
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/index.php?m=content&c=index&a=lists&catid=28" target="_blank" id="link24" onclick="changebg(24)">WEBENCH电源相关课程 </a></td>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/index.php?m=content&c=index&a=lists&catid=46" target="_blank" id="link25" onclick="changebg(25)">易电源相关课程</a></td>
</tr>
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/index.php?m=content&c=index&a=lists&catid=47" target="_blank" id="link26" onclick="changebg(26)">电源小贴士</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--电源课程结束-->
<!--DLP课程开始-->
<tr>
<td align="left" style="height:16px; font-size:14px;color:#000; font-weight:bold; padding-left:20px; border-bottom:1px dashed #ccc; padding-bottom:5px;">DLP课程列表</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="310" align="right">
<tr><td style="padding-left:20px;padding-top:5px;" height="25"><span class="anniu1" onclick="qiehuandlp('1')" id="dlp1">精品课</span><span class="anniu" onclick="qiehuandlp('2')" id="dlp2">公开课</span></td></tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="310" align="right" id="tabdlp1" style="display:block">
<tr>
<td align="left" style=" padding-left:20px;" height="25"><a href="http://www.eeworld.com.cn/training/2013/dlp_jp_1030/363.html" target="_blank" id="link27" onclick="changebg(27)">DLP Pico微投技术介绍</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="310" align="right" style="display:none;" id="tabdlp2">
        
<tr>
<td align="left" style=" padding-left:20px;" height="25">(暂无)</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--DLP课程结束-->
</table>
</td>
</tr>
<!--课程分类部分结束-->

除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/239.html

评论列表:

2  白癜风基金  2016-11-5 15:07:40 回复该留言  IP:123.122.59.106
我已做好准备,让您无可挑剔。
白癜风常识http://www.4000101199.com/bedfcs/
白癜风基金
1  白癜风基金  2016-10-26 14:00:31 回复该留言  IP:123.122.56.250
不要让梦想毁在别人的嘴里,因为别人不会为你的梦想负责.所以请百分之一万的相信你自己.不要踌躇,不要害怕失败,即使是最亲近的朋友也只能给你建设性的意见,最终,我们还是要为自己的梦想负责,而不是活在别人的世界。


白癜风援助http://wap.4000101199.com
白癜风基金

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量