1

当我点击链接“home”时，class home 应该改变并停留在 class home1 直到点击另一个链接，但它没有......类改变但点击另一个链接“bye”时，“Home”类不会t 从 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 添加到代码中，但仍然没有警报框或所需的结果，请指出错误

你可以看到它

请帮助

4

2 回答 2

1

:active-state 仅在您按住链接上的鼠标按钮时才处于活动状态！在您单击另一个链接之前，它是不活动的！这可以用 jQuery 完成：

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

最后单击的链接将具有 lastClickedLink 类，然后可以通过 css 使用a.lastClickedLink {}.

如果您希望此类在用户稍后返回页面时保持不变，则必须使用 cookie。为此使用jQuery cookie。

于 2013-07-26T09:56:13.157 回答
0

您是否正在努力实现这一目标？

<!-- 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/上测试它

干杯!

于 2013-07-27T08:17:49.270 回答