0

我正在尝试让我的幻灯片的文本 div 将其作为链接引用到活动背景中，但我似乎无法完成它。

我想要得到的是每次加载第一个文本块时都必须有一个背景表示它是活动的，当您单击文本块上的文本时，它将变为活动状态并通过单击标题（h1s）访问内容.

我会感谢你的帮助。

http://jsfiddle.net/EDc8M/1/

HTML：

<div id="sShow">
        <div id="sShowGallery">
            <ul>
                <li id="sld1"><a href="#article1"><img src="resource/images/sShow/img_news1.png" alt="img1" width="510" height="240"></a></li>
                <li id="sld2"><a href="#article2"><img src="resource/images/sShow/img_news2.jpg" alt="img2" width="510" height="240"></a></li>
                <li id="sld3"><a href="#article3"><img src="resource/images/sShow/img_news1.png" alt="img3" width="510" height="240"></a></li>
            </ul>
        </div>
        <div id="sShow_nav">
            <div class="sShow_bg">
                <a href="#article1"><h1>30 Characters max title 1</h1></a>
                <a href="#sld1"><p>Donec nisi velit, posuere sit amet bibendum at, hendrent rhoncus nunc. Aenean leo purus.</p></a>
            </div>
            <div class="sShow_bg">
                <a href="#article2"><h1>30 Characters max title 2</h1></a>
                <a href="#sld2"><p>Donec nisi velit, posuere sit amet bibendum at, hendrent rhoncus nunc. Aenean leo purus.</p></a>
            </div>
            <div class="sShow_bg">
                <a href="#article3"><h1>30 Characters max title 3</h1></a>
                <a href="#sld3"><p>Donec nisi velit, posuere sit amet bibendum at, hendrent rhoncus nunc. Aenean leo purus.</p></a>
            </div>
        </div>
    </div>

脚本：

$(document).ready(function(){
    $("#sShowGallery").css("overflow", "hidden");
    $(".sShow_bg").css("visibility", "visible");
    $(".sShow_bg a[href=#sld1]").addClass("ss_active");

    $("#sShow_nav").localScroll({
        target:'#sShowGallery', axis: 'x'
    });

    $(".sShow_bg a").click(function(){
        $(".sShow_bg a").removeClass("ss_active");
        $(this).addClass("ss_active");
    });
});
4

1 回答 1

0

无需anchors在div元素中使用两个。

html

<div class="sShow_bg">
    <a href="#sld1"><h1>This is a title</h1>
    <p>Lorem ipsum dolar sit amet</p></a>
</div>

css

.sShow_bg a {
    display: block;
    /* other code here */
}
.ss_active {
    background-color: orange;
    color: #FFFFFF;
}

javascript

$(document).ready(function(){
    $("#sShowGallery").css("overflow", "hidden");
    $(".sShow_bg").css("visibility", "visible");
    $(".sShow_bg a[href=#sld1]").addClass("ss_active");

    $("#sShow_nav").localScroll({
        target:'#sShowGallery', axis: 'x'
    });

    $(".sShow_bg a").click(function(){
        $(".sShow_bg a").removeClass("ss_active");
        $(this).addClass("ss_active");
    });
});

这将使您的盒子成为一个用户友好的大按钮。除非您回复我在上面留下的评论，否则我假设您不想默认隐藏这些段落。话虽如此，没有必要为您的操作设置两个单独的锚点，因为这会使用户感到困惑——他们可能习惯于单击一次以移动轮播。

于 2013-04-01T05:10:04.690 回答