活动伪类不工作 [英] active pseudo class not working
问题描述
当我点击链接家类家应该改变，并保持在类home1，直到另一个链接被点击，但它不...类更改，但点击其他链接
bye
< title> TEST< / title>
< link href =css / test.css =stylesheettype =text / css>
< script type =text / javascriptsrc =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>首页< / a>< / li>
< li class =bye>< a href =bye.php>再见< / 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 {
背景：$ 666无重复;
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指向我的错误
u可以在
中看到plz help
：active-state只有在你按住鼠标键的链接上才有效！它是没有活动，直到你点击另一个链接！这可以通过jQuery：
$（'a'）。 'a.lastClickedLink'）。removeClass（'lastClickedLink'）;
$（this）.addClass（'。lastClickedLink'）;
}）;
最后点击的链接会有类lastClickedLink，然后可以通过css用< c $ c> a.lastClickedLink {} 。
如果您希望此类在用户以后返回页面时持久，你必须使用一个cookie。请使用 jQuery Cookie 。
when i click on the link "home" class home should change and stay at class home1 till another link is clicked but it doesn't...class changes but on clicking the other link "bye" the class of "Home" doesn't change back from home1 to home and its no longer clickable too.
php is as
<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;
}
i have added jquery to the code but still no alert box or the desired result plz point me the mistake
u can see it in
plz help
The :active-state is only active while you hold down the mouse-button on the link! It is not active until you click another link! This could be done with jQuery:
$('a').click(function() {
$('a.lastClickedLink').removeClass('lastClickedLink');
$(this).addClass('.lastClickedLink');
});
The link that was clicked last will have the class lastClickedLink and can then be styled through css with a.lastClickedLink {}.
If you want this class to be persistent when the user comes back to the page later, you will have to use a cookie. Use jQuery cookie for this.
这篇关于活动伪类不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
