Jquery Click() 函数滚动和打开内容幻灯片？

Question

请看看这个Fiddle

HTML

<div class="content-slide-menu">
<ul class="menu">
    <li id="link1"> <a href="#null" data-page="page1">blah blah</a>

    </li>
    <li id="link2"> <a href="#null" data-page="page2">twit twoo</a>

    </li>
</ul>
</div>
<div class="content-slide">
<div id="page1" class="content">
     <h3>blah blah</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo     sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
<div id="page2" class="content">
     <h3>twit twoo</h3>

    <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
</div>
<div style="clear:both;"></div>
<div class="content-slide-menu">
<ul class="menu">
    <li id="link3"> <a href="#null" data-page="page3">Sit Amet</a>

    </li>
    <li id="link4"> <a href="#null" data-page="page4">lorem ipsum</a>

    </li>
</ul>
</div>
<div class="content-slide">
<div id="page3" class="content">
     <h3>Sit Amet</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
<div id="page4" class="content">
     <h3>lorem ipsum</h3>

    <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
    <div class="dots"><span>...</span>
    </div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer"> 
<a href="#null" title="Twit Twoo" id="twit-twoo">Twit Twoo</a>
<br>
<a href="#null" title="lorem ipsum" id="lorem-ipsum">lorem ipsum</a>
</div>

CSS

.content-slide-menu {
float:left;
width:220px;
padding:0 10px;
}
.content-slide-menu li {
list-style-type:none;
}
.content-slide-menu a {
text-decoration:none;
color:#2b2b2b;
font-size:135%;
}
.content-slide-menu a:hover {
color:#3ca3c5;
}
.content-slide {
float:left;
width:440px;
margin-top:65px;
}
.content-slide .content {
display:none;
}
.content-slide .content h3 {
font-size: 150%;
font-weight: bold;
}
.content-slide .content p {
margin:5px 0;
font-size:110%;
}
.dots {
font-size:350%;
font-weight:bold;
 }
.active {
color:#3ca3c5!important;
}


#footer {margin-top:800px;}

JAVA

$(document).ready(function () {
$(".menu a").click(function () {
    var $this = $(this),
        $slider = $this.closest('.content-slide-menu');
    $slider.next().children('.content').hide();
    $("#" + $this.data("page")).show();
    $slider.find('a.active').removeClass("active");
    $this.addClass('active');
});
$('.content-slide-menu li:first-child a').click()
});

感谢@Arun P Johny，我的内容幻灯片可以正常工作 但是，我现在希望能够从我网站上的其他地方点击这些不同的幻灯片。

我想要其他页面和页脚中的链接，这些链接可以点击到页面中带有内容滑块的部分，然后将其打开到该特定幻灯片。

我还希望这个点击功能从顶部偏移 105 像素（我有一个粘性顶部导航） 对此的任何帮助将不胜感激，因为我已经尝试过点击功能，并且可以让它滚动到包含带有偏移但不打开特定幻灯片的内容幻灯片的部分:(

提前致谢！

Answer 1

我将创建一个用于在特定滑块中显示特定页面的函数，然后您可以从站点的任何位置调用该函数：

function showPage(menu, page) {
    $slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
    $slider.next().children('.content').hide();
    $("#page" + page).show();
    $slider.find('a.active').removeClass("active");
    $("#link" + page).children().addClass('active');
}
function showAndScroll(menu, page) {
    showPage(menu, page);
    $('html, body').animate({
        scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
    }, 1000);
}
$(document).ready(function () {
    $(".menu a").click(function () {
        var $this = $(this),
            $slider = $this.closest('.content-slide-menu');
        showPage($slider.data("menu"), $this.data("page"));
    });
    $(".content-slide-menu").each(function(index, that) {
        showPage($(that).data('menu'), $(that).find("a").first().data('page'));
    });
});

对于滚动，我使用了这个答案：https://stackoverflow.com/a/6677069/2526054

我将代码添加到 Fiddle，以便您可以尝试。希望它是你要找的。 http://jsfiddle.net/veT6z/24/