javascript - 从外部链接轮播完整 slider 到特定元素

Question

我有带有 anchor 的index.html，我想导航到houses.html 中的不同元素。 house.html 有全页轮播 slider ，其中有 5 个元素，我只粘贴其中的 2 个。因此，为了在 index.html 中清楚起见，我有一个 anchor 可以导航到 housing.html，如下所示:

<li><a id="houses-slide-1" >Stark</a></li>
<li><a id="houses-slide-2" >Lannister</a></li>

和 jquery 作为 anchor :

$('#houses-slide-1').click(function(){
            /*do something here maybe?*/
            window.location.href = 'sl/houses.html';
        });
        $('#houses-slide-2').click(function(){
            /*do something here maybe?*/
            window.location.href = 'sl/houses.html';
        });

houses.html HTML:

<header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
        </ol>
        <!-- Wrapper for Slides -->
        <div class="carousel-inner" id="slide-one-1">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/ned.jpg');">
                    <div class="row">
                        <div class="col-md-5 col-md-offset-2 col-sm-5 col-sm-offset-2 slide-paneli">
                            <div class="col-md-12  slide-paneli">
                             <a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
                            </div>                            
                            <h1>...</h1>
                            <p>...</p>                           
                        </div> 
                    </div>
                </div>
                <div class="carousel-caption">
                    <h2>Starks</h2>
                </div>
            </div>
            <div class="item" id="slide-two-2">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('img/cersei.jpg');">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 slide-paneli">                           
                            <div class="col-md-12  slide-paneli">
                                 <a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
                            </div>
                            <h1>...</h1>
                            <p>...</p>
                            <div class="row">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-caption">
                    <h2>Lannister</h2>
                </div>
            </div>

Answer 1

更改您的 jQuery 以在您想要的 ID 处“加载”新页面:

$('#houses-slide-1').click(function() {
    window.location.href = 'sl/houses.html#slide-one-1';
});

$('#houses-slide-2').click(function() {
    window.location.href = 'sl/houses.html#slide-two-2';
});

当然，这是一个糟糕的解决方案。每次更改幻灯片 ID 时，您都必须更新每个点击处理程序。