Question

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

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

我将非常感谢你的帮助。

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

Answer 1

无需在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");
    });
});

这将使您的盒子成为一个用户友好的大按钮。除非你回复我上面留下的评论，否则我假设你不默认隐藏段落。话虽如此，没有必要为你的行动设置两个独立的锚点，因为这会让用户感到困惑 - 为了移动旋转木马，他可能习惯点击一次。

如何为幻灯片显示图像的div href

1 个答案: