Jquery菜单突出显示具有滑块视差的项目

时间:2014-04-07 08:08:24

标签: jquery html css menu highlight

我正在使用视差滑块。在这个视差滑块上,我添加了一个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>

0 个答案:

没有答案