Question

相对（我希望）简单的jQuery问题：

我有一个菜单：

<ul id="menu" style="list-style:none">
    <li><a href="#asics">ASICS</a></li>
    <li>/</li>
    <li><a href="#plants">PLANTS PLUS</a></li>
    <li>/</li>
    <li><a href="#tooheys">TOOHEYS</a></li>
    <li>/</li>
    <li><a href="#olympics">OLYMPICS</a></li>
    <li>/</li>
    <li><a href="#panadol">PANADOL</a></li>
    <li>/</li>
    <li><a href="#kia">KIA CADENZA</a></li>
</ul>

菜单控制滑块（代码不是必需的，只是标准循环div。以下是代码，取自jQuery Cycle Plugin Pager Tutorial：

var slider = new Swipe(document.getElementById('slider'));
$('#adSlideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0,  
    pager:  '#menu',
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
    }
});

正如您所看到的，在我的菜单中，每隔一个链接（带有标签的链接）与寻呼机相关;每个<li>/</li>项只是每个链接项之间的间隔符。如何编辑寻呼机代码，使其仅使用正确的<li>项？

这是一个jsFiddle，它可以更好地说明我的意思：http://jsfiddle.net/y4Qfw/12/＆lt; - 正如您所看到的，链接正在调用每个第二个div。目前我只是在每个第二个位置放置虚拟div，以便代码工作正常，但我宁愿找到一个不那么笨重的解决方案。想法？

Answer 1

不要使用<li>/</li>作为间距..使用其他元素，甚至更好地删除它们并使用以下CSS规则：

#menu li {
    margin-bottom: 30px;
}

示例：http://jsfiddle.net/y4Qfw/13/

将元素用于它们的用途

jQuery Cycle - 构建自定义寻呼机

1 个答案: