В меню Jquery выделены элементы с параллаксом-слайдером

Question

Я работаю над слайдером параллакса. На этом слайдере параллакса я добавил меню jquery, которое выделяет пункты, когда оно выбрано. Это работает (взгляните на: http://jsfiddle.net/jarod51/26Vgw/3/), но когда я добавляю скрипт Jquery для перехода к слайду страницы, меню выделения больше не работает. У вас есть идеи, как решить эту проблему?

<div id="cssmenu">
    <ul>
        <li class='active'><a id="testSlide1" href='#'><span>Home</span></a></li>
        <li><a id="testSlide2" href='#'><span>Products</span></a></li>
        <li><a id="testSlide3" href='#'><span>About</span></a></li>
        <li><a id="testSlide4" href='#'><span>Contact</span></a></li>
    </ul>
</div>
<div class="container">
<div id="da-slider" class="da-slider">
            <div class="da-slide">
                <h2>Warm welcome</h2>
                <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                <a href="#" class="da-link">Read more</a>
                <div class="da-img"><img src="images/1.png" alt="image01" /></div>
            </div>
<div class="da-slide">
                <h2>Easy management</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                <a href="#" class="da-link">Read more</a>
                <div class="da-img"><img src="images/2.png" alt="image01" /></div>
            </div>
            <nav class="da-arrows">
                <span class="da-arrows-prev"></span>
                <span class="da-arrows-next"></span>
            </nav>
</div>
</div>
<script>
// When we click on the LI
$("li").click(function(){
  // If this isn't already active
  if (!$(this).hasClass("active")) {
    // Remove the class from anything that is active
    $("li.active").removeClass("active");
    // And make this active
    $(this).addClass("active");
  }
});
</script>
</script>   
        <script type="text/javascript">
            $(function() {

                var $slider = $('#da-slider');

                // initialize the slider
                $slider.cslider();

                // example how to go to page 1 when clicking on a link
                $('#testSlide1').on( 'click', function( event ) {

                    $('#da-slider').cslider( 'page', 0 );
                    return false;

                } );

                $('#testSlide2').on( 'click', function( event ) {

                    $('#da-slider').cslider( 'page', 1 );
                    return false;

                } );


            });
        </script>