2

画像 (#slideshow) とテキスト (#slideshow-text) の 2 セットのリストに固定された .localScroll ボタン (#slideshow-nav) を使用し、テキストに .hide および .slideDown 効果を追加しました。したがって、ボタンをクリックするたびに、リンクされた画像と非表示のテキストが所定の位置にスクロールされ、テキストが表示されます。Firefox を除くすべてのブラウザーで機能します。ブラウザーを更新すると、ボタンとテキストは最初にリストされた位置に戻りますが、画像は戻りません。誰でも提案できるJSソリューションはありますか?

<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.localscroll.js"></script>
<script type="text/javascript">
   $(document).ready(function() {   
      $("#slideshow, #slideshow-text").css("overflow", "hidden");
      $("#slideshow-nav").css("visibility", "visible");     
      $("#slideshow-nav li:first-child a").addClass("active");

      $.localScroll({target:'#slideshow', axis: 'x'
   });

   $("#slideshow-nav a").click(function(){ 
      $("#slideshow-nav a").removeClass("active");
      $("#slideshow-text li").hide();                           

      var childIdx = parseInt($($(this)[0].parentElement).index(), 10) + 1
         $("#slideshow-text li:nth-child(" +  childIdx + ")").hide("slow", function() {
            $("#slideshow-text li:nth-child(" +  childIdx +        ")").slideDown("slow");                                                                             
         });
      $(this).addClass("active");
   });
});`
</script>
4

0 に答える 0