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);
});

需要注意的主要事项：

使用rel属性。使用它，很棒。
使用空选择器类go-to - 仅用于定义与循环交互的特定链接。这可以是您喜欢的任何名称（只要符合下面列出的惯例），例如foo，bar，coco-the-clown等。

最后，下一篇文章有点偏离主题，但却是一条非常有用的信息;
如果您希望您的网页符合W3C标准，则ID必须是唯一的，并以字母开头。直接来自马口：

ID令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_” ），冒号（“：”）和句号（“。”）。

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

回复您的评论

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

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

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

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

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

如果你现在去尝试这个（假设你有超过1张幻灯片...）并且这是你想要的，你可能不需要回来看其余的。

因此，当您点击上面提到的链接时，如果您没有使用幻灯片编号2，则此应该带您滑动2号 - “什么？！”我听到你哭了。请继续阅读。

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

所以 - 如果你正在使用PHP＆amp; MySQL用于显示您的内容，将“ID”分配给您的主播maincontent属性非常容易。或者，您可以对这些进行硬编码。

让我知道你是怎么做的！

Jquery循环菜单与容器

1 个答案: