Изменение классов

[Valedus]

Здравствуйте,
У меня есть галерея с альбомами. При нажатии на альбом он должен показыватся поверх других, также есть класс .active, который дает нужному альбому большый z-index, чем у других. Я не знаю как сделать, чтобы при нажатии на альбом у него менялся класс на .active, а у альбома у которого уже есть этот класс он убирался.
Прикрепляю пример html кода 2-х альбомов:

<div class="photo">
<ul class="topic">
	<!--тут--><li class="active"><a class="set" href="#Portraits">Portraits
		<ul>
			<li><a href="images/pic1.jpg" data-milkbox="milkbox:g1" title="example"><img src="images/pic1.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic2.jpg" data-milkbox="milkbox:g1"><img src="images/pic2.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic3.jpg" data-milkbox="milkbox:g1"><img src="images/pic3.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic4.jpg" data-milkbox="milkbox:g1"><img src="images/pic4.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic5.jpg" data-milkbox="milkbox:g1"><img src="images/pic5.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic6.jpg" data-milkbox="milkbox:g1"><img src="images/pic6.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic7.jpg" data-milkbox="milkbox:g1"><img src="images/pic7.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic8.jpg" data-milkbox="milkbox:g1"><img src="images/pic8.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic9.jpg" data-milkbox="milkbox:g1"><img src="images/pic9.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic10.jpg" data-milkbox="milkbox:g1"><img src="images/pic10.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic11.jpg" data-milkbox="milkbox:g1"><img src="images/pic11.jpg" alt="" width="140"></a></li>
			<li><a href="images/pic12.jpg" data-milkbox="milkbox:g1"><img src="images/pic12.jpg" alt="" width="140"></a></li>
		</ul>

	</li>

	<!--тут--><li><a class="set" href="#Landscapes">Landscapes
		<ul>
			<li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
			<li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
		</ul>

[ksa]

Я не знаю как сделать, чтобы при нажатии на альбом у него менялся класс на .active, а у альбома у которого уже есть этот класс он убирался.

Как вариант...
1. Убери у всех элементов .active
2. Дай .active тому, на каком клацнули

[Valedus]

Что то попробовал написать, но не пашет.
$(".photo").find("li").click(function(){
$('.active').removeClass('.active');
$(this).addClass('active');
});

[рони]

Valedus,
интересно как после этого кода кликать по картинкам

[рони]

Valedus,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
  <style type="text/css">
         .topic ul{
            display: none;
         }
         .active > ul{
           display: block;
         }
  </style>
  <script>
      $(function ()
          {
$(".topic ul").prev("a").click(function(event){
  $('.active').removeClass('active');
  $(this).parent().addClass('active');
  event.preventDefault()
  });
          }
        );
  </script>
</head>

<body>
  <div class="photo">
    <ul class="topic">
      <!--тут-->

      <li class="active">
        <a class="set" href="#Portraits">Portraits</a>

        <ul>
          <li>
            <a href="http://www.cssplay.co.uk/menu/lbox/landscape1.jpg"><img src=
            "http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title=""></a>
          </li>

          <li>
            <a href="http://www.cssplay.co.uk/menu/lbox/landscape2.jpg"><img src=
            "http://www.cssplay.co.uk/menu/lbox/landscape2a.jpg" alt="" title=""></a>
          </li>
        </ul>
      </li><!--тут-->

      <li>
        <a class="set" href="#Landscapes">Landscapes</a>

        <ul>
          <li>
            <a href="http://www.cssplay.co.uk/menu/lbox/landscape3.jpg"><img src=
            "http://www.cssplay.co.uk/menu/lbox/landscape3a.jpg" alt="" title=""></a>
          </li>

          <li>
            <a href="http://www.cssplay.co.uk/menu/lbox/landscape4.jpg"><img src=
            "http://www.cssplay.co.uk/menu/lbox/landscape4a.jpg" alt="" title=""></a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>