1

ナビゲーション リンクの [サービス] をクリックするたびに、以前にアクセスしたセクションが表示されます。代わりに、常に最初のセクションの表示を再開したいと思います。どうすればこれを機能させることができますか？

これは html マークアップです。

<ul id="nav">
<li id="nav-home">Home</li>
<li id="nav-services">Services</li>
<li id="nav-contact">Contact</li>
</ul>


<div class="panel" id="panel-services">
<ul class="cycle-services cycle">

<li>
<div class="columnServicesintro">
<p>This is 1st Section</p>
</div>
</li>

<li>
<div class="columnServices">
<p>This is 2nd Section</p>
</div>
</li>

<li>
<div class="columnServices">
<p>This is 3rd Section</p>
</div>                  
</li>

</ul>
</div>

そして、これはjQueryです：

function cycle() {


   // Services Cycle.
   var $cycleServices = $(".cycle-services");

   // The paging.
   $cycleServices
      .before('<ul class="cycle-services-pager" />');

   // Let's put in the next button.
   $cycleServices
      .after("<div class='cycleServicesNext'>Next</div>");

   $cycleServices.cycle({ 
      fx:     "scrollHorz", 
      speed:  800,
      easing: "easeOutExpo",
      timeout: 0, 
      pager:   ".cycle-services-pager",
      next:   ".cycleServicesNext",
      prev:   ".cycleServicesPrevious",
      pagerAnchorBuilder: function(idx, slide) {
         return '<li id="cycle-services-pager-' + idx + '">' + idx + '</li>';
      }
   });

   // Resize Panel according to slide cycle selected.
   var $panelServices = $("#panel-services");

   $("#cycle-services-pager-0")
      .on("click", function() {
         $panelServices
            .animate({ "width" : "430px" }, 800, "easeOutExpo");
      });

   $("#cycle-services-pager-1")
      .on("click", function() {
         $panelServices
            .animate({ "width" : "555px" }, 800, "easeOutExpo");
      });

   $("#cycle-services-pager-2")
      .on("click", function() {
         $panelServices
            .animate({ "width" : "555px" }, 800, "easeOutExpo");
      });

   $("#cycle-services-pager-3")
      .on("click", function() {
         $panelServices
            .animate({ "width" : "555px" }, 800, "easeOutExpo");
      });

   $("#cycle-services-pager-4")
      .on("click", function() {
         $panelServices
            .animate({ "width" : "555px" }, 800, "easeOutExpo");
      });


   $(".cycleServicesNext")
      .on("click", function() {

         var thePanelID = $(".cycle-services-pager").find("li.activeSlide").text();

         if ( thePanelID == 0 ) {

            $panelServices
               .animate({ "width" : "430px" }, 800, "easeOutExpo");

         } else {

            $panelServices
               .animate({ "width" : "555px" }, 800, "easeOutExpo");

         }



      });


}
4

1 に答える 1