0

我目前正在尝试找到一种解决方法，让 Niall Doherty 的 Coda Slider 2 上的箭头突出显示选定的选项卡。最初我尝试使用标题图像上的图像来执行此操作，虽然它在我的 Mac 上的 Safari 中看起来不错，但它在其他设备上并不重要（请参阅www.lukekendalldesign.co.uk/pss/productsandservices）

我尝试使用 CSS 箭头创建它，但事实证明这相当困难，所以我找到了使用背景图像的解决方法，但我遇到了另一个问题。

http://cl.ly/HovO（对不起，我不能上传图片 - 新手！）

请参考上面的链接截图。与背景匹配的浅灰色三角形是标题图像的一部分。黑色三角形使用以下 CSS 代码定位：

.coda-nav ul li a.current { 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    color: white;
    height: 60px; 
    z-index: 20000;
    background: url(../images/triangle.png) no-repeat 50% 100%;
    position: relative;
    overflow: visible;
}

我想要做的是将这个黑色箭头放在灰色图像箭头所在的位置（如果这有意义吗？）我该怎么做？

我尝试添加边距和填充，但是它扩展了灰色背景并且不会将背景图像黑色三角形向下推。

虽然我找到了类似的解决方案，但似乎没有一个适用，因为 .current 类是使用以下 JS 应用的：

// If we need a tabbed nav
    $('#coda-nav-' + sliderCount + ' a').each(function(z) {
        // What happens when a nav link is clicked
        $(this).bind("click", function() {
            navClicks++;
            $(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
            offset = - (panelWidth*z);
            alterPanelHeight(z);
            currentPanel = z + 1;
            $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
            if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
        });
    });

我非常感谢任何人在这方面可以提供给我的任何帮助——因为这是一个 JS 问题，这有点超出我的理解范围！:(

4

1 回答 1

0

我已经在 Firefox 中使用 windows 上的 fire bug 进行了尝试。我认为有2个问题。首先是 ul 元素上的边距应该是 167px （黑色箭头在图像中的位置不是很好（中间是 232 px 你是说这个吗？）。箭头只需要向下移动，我做了将背景位置设置为： url("../images/triangle.png") no-repeat scroll 50px 60px transparent 希望这会有所帮助。

于 2012-07-02T21:02:18.513 回答