想要一种JS效果，点击后样式改变，离开后恢复

Question

想要一种JS效果，点击后样式改变，离开后恢复例如菜单，首页  次页当在首页时候，就默认为红色的这种样式，但点击次页后就变成：首页  次页然后回到首页又变成，首页  次页
求高手赐教，JS+CSS

Answer 1

你去研究一下jquery它里面有实现。

Answer 2

这个涉及到你的页面设计方式和页面的处理的方法如果你用的一些框架类的开发平台，无疑会有个公共模板一说，这样的话就说明需要特殊处理如果你用的是页面刷新处理的方法又不同，起码的一点是页面刷新了就需要在onload的地方来调整

Answer 3

我教你一个最简单的方法<script type="text/javascript">
var j_url =  location.pathname;
j_url =  j_url.toLowerCase();
var j_search = location.search;
j_search = j_search.toLowerCase();
var turl = j_url + j_search;
function dh(){
if(turl == "/funlin/index.php") {
document.getElementById("sdh1").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
} else if(turl == "/funlin/aboutus.php?ArticleID=57"){
document.getElementById("sdh2").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
} else if(j_url == "/funlin/soft_classn.php" || j_url == "/funlin/soft_show.php"){
document.getElementById("sdh3").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
} else if(j_url == "/funlin/soft_classnw.php"){
document.getElementById("sdh4").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
} else if(j_url == "/funlin/guest.php"){
document.getElementById("sdh6").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
} else if(j_url == "/funlin/Article_Class.php" || j_url == "/funlin/Article_Show1.php"){
document.getElementById("sdh5").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
} else if(turl == "/funlin/aboutus.php?ArticleID=54"){
document.getElementById("sdh7").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
}
}
dh()
</script>

Answer 4

 这样的结构不太合理吧，这么多ELSE IF看着头晕，不如改成switch结构！

Answer 5

你是指document.getElementById("sdh7").class = "style"吗？

Answer 6

嗯谢谢falizixun2的指点。改成switch确实会好点。

Answer 7

else if(turl == "/funlin/aboutus.php?ArticleID=57"){这句的意义是？

Answer 8

浏览器地址栏 location.pathname+location.search部分的值如果是/funlin/aboutus.php?ArticleID=57就执行其后的语句！

Answer 9

这个是因为导航上有两个栏目都是用的/funlin/aboutus.php这个页面只是后面的ArticleID参数不同，为了能区分出来 还是要把下面的所以都改成小写才行。

Answer 10

a34020249，修改了你的代码结构，思路版权依然是你的，个人感觉：这样看起来结构更清晰，修改更方便一点：<script type="text/javascript">
    var j_url =  location.pathname;
    j_url =  j_url.toLowerCase();
    var j_search = location.search;
    j_search = j_search.toLowerCase();
    var turl = j_url + j_search;
    function dh(){
switch(turl)
       {
   case "/funlin/index.php":
      document.getElementById("sdh1").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
      break;
   case "/funlin/aboutus.php?ArticleID=57":
            document.getElementById("sdh2").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
break;
       case "/funlin/soft_classn.php"||"/funlin/soft_show.php":
            document.getElementById("sdh3").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
break;
       case  "/funlin/soft_classnw.php":
            document.getElementById("sdh4").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
break;
       case "/funlin/guest.php":
            document.getElementById("sdh6").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
break;
       case "/funlin/Article_Class.php" || "/funlin/Article_Show1.php":
            document.getElementById("sdh5").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
break;
       case "/funlin/aboutus.php?ArticleID=54":
            document.getElementById("sdh7").style.backgroundImage = "url('pro_drop_1/blank_over.gif')";
break;
    }
    dh()
</script>

Answer 11

<style type="text/css">
        #myUl
        {
            width:800px;
            height:30px;
            overflow:hidden; 
            margin:0;
            padding:0;       
        }
        .myLi_A
        {
            width:100px;
            line-height:30px;
            font-size:14px;
            float:left;
            color:Red;
            text-align:center;
            background-color:Gray;
            list-style:none;
        }
        .myLi_B
        {
            width:100px;
            line-height:30px;
            font-size:14px;
            float:left;
            color:blue;
            text-align:center;
            background-color:Maroon;
            list-style:none;
        }
    </style>
    <script type="text/javascript">
        function $(id) { return document.getElementById(id); }
        function navCheck(num) {
            for (var i = 1; i < 7; i++) {
                if (num == i) {
                    continue;
                } 
                $("myli" + i).className = "myLi_B";
            }
            $("myli" + num).className = "myLi_A";
        }
    </script>
-------------------------------------
    <ul id="myUl">
        <li id="myli1" onclick="navCheck(1)" class="myLi_A">首页</li>
        <li id="myli2" onclick="navCheck(2)" class="myLi_B">首页</li>
        <li id="myli3" onclick="navCheck(3)" class="myLi_B">首页</li>
        <li id="myli4" onclick="navCheck(4)" class="myLi_B">首页</li>
        <li id="myli5" onclick="navCheck(5)" class="myLi_B">首页</li>
        <li id="myli6" onclick="navCheck(6)" class="myLi_B">首页</li>
    </ul>

Answer 12

 <style>
#a_Checked{color:red;}
</style>
 <div class="sidebar" id="div_Sidebar">
            <div class="item" >
                <h6>用户管理</h6>
                <ul>     
                  <li><a href="/Manager/User/UserList.aspx">用户列表</a></li> 
                   <li><a href="/Manager/User/AddUser.aspx">添加用户</a></li>                
                  <li><a href="/Manager/User/UpdatePassword.aspx">修改密码</a></li>  
                  <li><a href="/Manager/User/Safety.aspx">设置密码保护</a></li> 
                  <li><a href="javascript:;" onclick="if(confirm('你真的要退出系统吗？')){document.location.href='/Manager/Logon.aspx?out=true';}" >安全退出</a></li>
                </ul>
                </div>
             <div class="item" >
                <h6>公司管理</h6>
                <ul>     
                  <li><a href="/Manager/Company/CompanyList.aspx">公司列表</a></li>               
                 </ul>
            </div>
           
        </div>
 window.onload=function(){
var div_Sidebar = document.getElementById('div_Sidebar');
              var menuList = div_Sidebar.getElementsByTagName('a');
        var url = document.location.href;
        var hrefUrl = '';
        if(menuList==null || typeof(menuList)=='undefined')
        { return;}
        var index=0;
        for(;index < menuList.length;index++)
        {
            hrefUrl = menuList[index].href;
            hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
            if(hrefUrl!='' && hrefUrl != '/')
            {
                if(url.indexOf(hrefUrl) > 0 )
                {
                    break;
                }
            }
        }
        if(index <  menuList.length)
        {
            menuList[index].id = 'a_Checked';
        }
};加载事件，判断url ,设置对应的标签的样式就可以了

Answer 13

first.htm 和 second.htm代码一样，如下：
<html>
<head>
<style>
a:link
{
text-decoration: none;
}
a:active
{
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
a:visited
{
text-decoration: none;
}
</style>
<script>
var linkList = [["fPage","first.htm"],["sPage","second.htm"]];
function judge()
{
for(i=0;i<linkList.length;i++)
{
if(linkList[i][1].toUpperCase() == GetCurrentPage().toUpperCase())
{
document.getElementById(linkList[i][0]).style.color = "red";
}
else
document.getElementById(linkList[i][0]).style.color = "";
}
}window.onload = function(){judge();};function GetCurrentPage() {
    var u = document.location.href;
    var i = u.indexOf('?');
    if (i > 0)
        u = u.substring(0, u.indexOf('?'));
    var info = u.split('/');
    var page_info = info[info.length - 1].split('?');
    return page_info[0];
}
</script>
</head>
<body>
<a href="first.htm" id="fPage">首页</a>
<a href="second.htm" id="sPage">第二页</a>
</body>
</html>

Answer 14

有这么复杂吗？一个非常简单的小功能，几行代码的事
先定义一个样式，比如：.focus{color:red}然后给上述的首页次页等绑定js方法，比如myfocus(this) (注意：这个onclick方法调用不要放在a的javascript:focus(this)这种伪js协议中，这里面的this不一样)，这里写出jQuery的代码，其他类似:function myfocus(self){
  $('.focus').removeClass('focus');
  $(self).addClass('focus');
}