Question

当我点击链接＆＃34; home＆＃34; class home应该改变并留在class home1直到另一个链接被点击但它没有...类更改但是点击其他链接＆＃34;再见＆＃34; ＆＃34; Home＆＃34;不会从home1更改回home，也不会再点击它。

php就是

    <title>TEST</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="text/jquery-1.10.2.min.js"></script>



 <script type="text/javascript">
    $("ul.nav li").click(function(e) {
   var newclass=($(this).attr("class")+"1");
   var oldclass=($(this).attr("class"));
   alert($(this).attr("class")+"1");
   $(this).attr( "class",newclass);

 });
</script>
</head>

    <body>
        <div class=sidebar>       
                    <ul id=nav>
                        <li class="home"><a href="index.php"> Home</a></li>
                        <li class="bye"><a href="bye.php"> Bye </a></li> 
                    </ul>
         </div>
     </body> 

    </html>

CSS

body {
width:1020px;
margin:0 auto;
position:absolute;  
}

.sidebar {
    margin-left:10px;
    }
.nav {
    display:block;
    margin-top:60px;        
}

ul {
    list-style-type:none;
    }

a{
text-decoration:none;
border:none;    
}

li.home{ 
 background: $666 no-repeat;
 width:150px;
 height:65px;
    color:#fff;
}


li.bye{ 
background: $666 no-repeat;
width:150px;
 height:65px;
    color:#fff;  
}


li.home:hover {
    background: #678fef  no-repeat;
    color:#fff;


    }
li.bye:hover {
    background: #678fef  no-repeat;
    color:#fff;
    }

li.home1 {
    background: #678fef  no-repeat;
    color:#fff;
    }
li.bye1 {
    background: #678fef  no-repeat;
    color:#fff;
    }

我已经在代码中添加了jquery，但仍然没有警告框或所需的结果plz指出我的错误

你可以在

中看到它

plz help

Answer 1

：只有在按下链接上的鼠标按钮时，才会激活活动状态！在您单击其他链接之前它不会处于活动状态！这可以通过jQuery完成：

$('a').click(function() {
    $('a.lastClickedLink').removeClass('lastClickedLink');
    $(this).addClass('.lastClickedLink');
});

最后点击的链接将包含lastClickedLink类，然后可以使用a.lastClickedLink {}通过css设置样式。

如果您希望此类在用户稍后返回该页面时保持持久性，则必须使用cookie。请使用jQuery cookie。

Answer 2

你想要实现这个目标吗？

<!-- The CSS Section -->
<style type="text/css">
body {
  width:1020px;
  margin:0 auto;
  position:absolute;
}
.sidebar {
  margin-left:10px;
}
.nav {
  display:block;
  margin-top:60px;
}
ul {
  list-style-type:none;
}
a {
  text-decoration:none;
  border:none;
}
li.home {
  background: $666 no-repeat;
  width:150px;
  height:65px;
  color:#fff;
}
li.bye {
  background: $666 no-repeat;
  width:150px;
  height:65px;
  color:#fff;
}
li.home:hover {
  background: #678fef no-repeat;
  color:#fff;
}
li.bye:hover {
  background: #678fef no-repeat;
  color:#fff;
}
li.home1 {
  background: #678fef no-repeat;
  color:#fff;
}
li.bye1 {
  background: #678fef no-repeat;
  color:#fff;
}
</style>

<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Applying Custom JS Functions -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $("ul#nav li a").click(function (e) {
        var newClass = ($(this).parent().attr('class') + 1);
        var oldClass = ($(this).parent().attr('class'));
        alert(newClass);
        $(this).parent().attr('class', newClass)
    });
});
</script>

<!-- The HTML Section -->
<div class="sidebar">
    <ul id="nav">
        <li class="home"><a href="#"> Home</a></li>
        <li class="bye"><a href="#"> Bye </a></li>
    </ul>
</div>

或者只是在这个小提琴上进行测试http://jsfiddle.net/FHsvj/

干杯！

活动伪类不起作用

2 个答案: