javascript - jquery cycle - 你能从其他页面定位某些 "slide"吗？

Question

所以我尝试在这里搜索，我发现了类似的问题，但实际上与我的不同，我可以使用.. 所以问题是我正在使用 jquery 循环插件，一切都很好。所以这是我在页面上使用的 jquery，比方说 page.html

$(function() {
    $('#rotation').cycle({ 
        fx:'scrollRight',
        timeout: 0,
        speed: 500,
        startingSlide: 0
    });

    $('#goto1').click(function() { 
        $('#rotation').cycle(0);

        return false;
    });

    $('#goto2').click(function() { 
        $('#rotation').cycle(1); 

        return false;
    });
});

你的猜测是我正在使用这样的导航来完成它:

<li><a href="#" id="goto1">Link1</a></li>
<li><a href="#" id="goto2">Link2</a></li>

最后的 div 结构是

<div id="rotation">
    <div> Content of first cycle </div>
    <div> Content of second cycle </div>
</div>

而且效果很好。现在我的问题是，我可以从 index.html 中定位到 div two 吗？页面不是 php，我的想法是创建一个从索引到 page.html#goto2 的 href 并以某种方式使用它，但由于它不是 php 我不知道我该怎么做......如果有人知道我会的技巧心怀感激。谢谢。

Answer 1

根据你想要的标签发送查询字符串为?tab=1, tab=2, tab=3

现在根据QueryString值改变tabs来设置tab。为简单起见，我们将 id 添加到列表中的 anchor ，并将 href 动态附加到每个 anchor 。

    // Run this on document ready.
    var listItemsofThumbnail = $("ul.sidebarTabset li");

    listItemsofThumbnail.each(function (idx) {
        var licount = idx + 1;
        $(this).addClass("currentactive1_s" + licount)
        var linkurl = $(this).find("a").attr("href");
         $(this).find("a").attr("href", linkurl + "?tab=" + licount);
     });


    var currenturl = window.location.href;
    var QuerystringValue = getParameterByName("tab");

    switchImages(QuerystringValue);

    // document ready end.

    function switchImages(tab) {
       if (tab == null || tab == undefined || tab == 0) tab = 1; // catch any bad data
           DeactivateAllTab();
           ActivateTab(tab - 1);
       }


     // Dsiplays the li 
    function ActivateTab(i) {
         if (!($("#slider1 li#currentactive1_s" + i).hasClass("currentactive1_on"))) {
              $("#slider1 li#currentactive1_s" + i).addClass("currentactive1_on");
              $("#slider1 li#currentactive1_s" + i).css({ "float": "left", "position": "relative", "opacity": 1, "zIndex": 2, "display": "list-item" });
          }
         var thumbnailindex = i + 1;
         if (!($(".sidebarTabset li.currentactive1_s" + thumbnailindex).hasClass("active"))) {
            $(".sidebarTabset li.currentactive1_s" + thumbnailindex).addClass("active");
         }

     }

     // Hides the li
     function DeactivateAllTab() {
        $("#slider1 > li").each(function () { 
          $(this).removeClass("currentactive1_on");
          $(this).css({ "float": "none", "position": "absolute", "opacity": 0, "zIndex": 0 });
});
        $(".sidebarTabset li").each(function () {
           if ($(this).hasClass("active")) {
               $(this).removeClass("active");
            }
        });

     }

现在我们的 jquery 循环正在自动添加类 currentactive1_on_tab name，所以我们用它来映射缩略图和幻灯片。此外，我们在 activate 和 deactivate 函数中相应地更改了 css - 以便像 jquery 循环一样工作。

如果您有任何问题，请告诉我。