Question

我有带锚的index.html，我想导航到houses.html中的不同项目。 houses.html有整页旋转木马滑块有5个项目生病粘贴其中只有2个。所以要在index.html里面清楚我有这样导航到houses.html的锚点：

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

和锚点的jquery：

$('#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时，您都必须更新每个click处理程序。

旋转木马完整滑块到外部链接的特定项目

1 个答案: