带有容器的 Jquery 循环菜单

Question

我正在尝试将一个锚链接到一个特定的 div。这就是我所拥有的：

菜单

<div id="mainmenu">
    <ul class="sidenav"  id="menu">
        <li>
            <a href="#page2">Serviciile noastre
            </a>
        </li>
        <li>
            <a href="#page8">Credite Nevoi personale fara ipoteca
            </a>
        </li>
        <li>
            <a href="">Credite Nevoi personale cu ipoteca
            </a>
        </li>
        <li>
            <a href="">Credite ipotecare
            </a>
        </li>
        <li>
            <a href="">Carduri de credit
            </a>
        </li>
        <li>
            <a href="">Credite "Prima Casa"
            </a>
        </li>
        <li>
            <a href="">Refinantari credite/carduri
            </a>
        </li>
        <li>
            <a href="">Acte necesare
            </a>
        </li>
        <li>
            <a href="">Economisire creditare
            </a>
        </li>
    </ul>
</div>

还有 JavaScript

var $jts = jQuery.noConflict();
$jts(function() {

// maincontent cycle
$jts('#maincontent').cycle({
    fx:     'blindY', // You can choose effect do you like, for reference : http://www.malsup.com/jquery/cycle/browser.html
    speed:  'slow',
    timeout: 0,
    cleartype: true,  // true if clearType corrections should be applied (for IE) 
    cleartypeNoBg: true, 
    pager:  '#menu',
    startingSlide : 0,
    after:onAfter,
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#menu li:eq(' + (idx) + ') a';
    }
});

function onAfter(curr, next, opts, fwd){
    //get the height of the current slide
    var $ht =  $jts(this).height();

我正在使用 jquery.cycle.all.min.js。

Answer 1

所以如果我理解正确，您希望有一个<a href=... 点击事件将其带到相应的幻灯片。

为您的示例幻灯片 ID 7 执行此操作的最简单方法：

您要点击查看特定幻灯片的链接：

<!-- support for those strange users
without Javascript - we will fix this later -->
<a href="your-backup-page.html" class="go-to" rel="7">Sample text</a>

你的 JS 来控制行为

//if the user has JS enabled, we will stop the
//link from taking us away from the page
//and only do the sweet animation

$(".go-to").click(function(gt){
    gt.preventDefault();
    var slide = $(this).attr("rel");
    $("#maincontent").cycle(slide);
});

主要注意事项：

1. 使用rel 属性。使用它，很棒。

2. 使用空选择器类go-to - 仅用于定义与循环交互的特定链接。这可以是您喜欢的任何名称（只要它遵循下面概述的约定），例如foo、bar、coco-the-clown 等。

   最后，下一个有点跑题了，但还是一条有用的信息；

3. 如果您希望您的页面符合 W3C 标准，则 ID 必须是唯一的，并且以字母开头。直接从马嘴里：

ID 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_" )、冒号 (":") 和句点 (".")。

http://www.w3.org/TR/html4/types.html#type-name

回应您的评论

所以我们要做的基本前提：

1. 为与幻灯片编号对应的每个链接分配一个标识符 - 这意味着这必须是一个数字。
2. 找出幻灯片的顺序。

使用您在评论中发布的链接，您应该更改它以反映您希望在单击时看到的幻灯片编号，如下所示：

<a href="credite.php" class="go-to" rel="1" >Credite Nevoi personale fara ipoteca</a>

另外，从 div 元素中删除 rel="opt" 和 class="go-to"。

如果您现在就去尝试一下（假设您有超过 1 张幻灯片...）并且这是您想要的，您可能不需要再回来阅读其余部分。

因此，当您点击上述链接时，应该将您带到第 2 张幻灯片 - 只要您不在第 2 张幻灯片上。“什么？！”我听到你哭了。继续阅读。

因此，如果您在浏览器中查看呈现的源代码，您会看到在循环元素 maincontent 内部，作为 maincontent 直接后代的每个 div 元素将是幻灯片。这些是有序的（对于计算机）； 0 是起始幻灯片，1 是第二张幻灯片，2 是第三张幻灯片，无穷无尽。

所以 - 如果您使用 PHP 和 MySQL 来显示您的内容，将“ID”分配给您的锚的 rel 属性将非常容易。或者，您可以对它们进行硬编码。

让我知道你是怎么做的！