Question

我是jquery的新手，我遇到了一些问题。我想要实现的目标：

我将我的页面分成了几个部分。除了主页部分之外的每个部分都在屏幕之外。例如，如果某人点击了关于按钮，那么#about部分应该流入视图，这是＆＃34;当前＆＃34; div此时此刻。如果你点击另一个链接，例如，当前div（在这个例子中它是＃about-section）将在左边动画，现在新的当前部分 - #skills - 将流入视图。

菜单取自现有页面并且正在运行，这意味着点击的链接正在获得当前页面。

我的jquery代码：

$('.menu-btn1').click(function() {

    $("#about").addClass("active");
    $("#about").animate({
        left: '0px'
    }, "1500");
    $("#myskills").animate({
        left: '-1170px'
    }, "1500");
    $("#myskills").removeClass("active");
});

$('.menu-btn2').click(function() {

    $("#myskills").addClass("active");
    $("#myskills").animate({
        left: '0px'
    }, "1500");
    $("#about").animate({
        left: '-1170px'
    }, "1500");
    $("#about").removeClass("active");
});

菜单标记：

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav pull-right">
        <li class="current"><a class=" menu-btn" href="#slider" data-toggle="collapse" data-target=".navbar-collapse">TOP</a></li>
        <li><a class=" menu-btn1 menu-btn" href="#about" data-toggle="collapse" data-target=".navbar-collapse">ABOUT</a></li>
        <li><a class=" menu-btn2 menu-btn" href="#myskills" data-toggle="collapse" data-target=".navbar-collapse">SKILLS</a></li>
    </ul>
</div>

部分的标记：

<section id="about" class="sectionID1 sectionID">
        <div class="container">
            <!-- Header Starts -->
            <div class="row">
                <div class="col-md-8 col-md-offset-2 section-heading">
                    <div class="heading animated" data-animation="fadeInUp" data-animation-delay="200">ABOUT ME</div>
                    <h1 class="icon-line animated" data-animation="fadeInUp" data-animation-delay="700"><i class="fa fa-briefcase"></i></h1>
                    <div class="description animated" data-animation="fadeIn" data-animation-delay="1200">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</div>
                </div>
            </div>
            <!-- Header Ends --> 
            <!-- Row 1 Starts -->
            <div class="row">
                <!-- Left Column Starts -->
                <div class="col-md-3 personal-info col-left animated" data-animation="fadeInRight" data-animation-delay="1700">
                    <div class="line1">FULL NAME<br>
                        <span class="line2">JOHN DOE</span> 
                    </div>
                    <div class="line1">BIRTHDAY<br>
                        <span class="line2">7 FEB, 1980</span> 
                    </div>
                    <div class="line1">BIRTH PLACE<br>
                        <span class="line2">MELBOURNE, AUSTRALIA</span> 
                    </div>
                    <div class="line1">HOBBIES<br>
                        <span class="line2">ART, READING, MOVIES</span> 
                    </div>
                </div>
                <!-- Left Column Ends -->
                <!-- Middle Column Starts -->
                <div class="col-md-6">
                    <div class="col-md-8 col-md-offset-2 animated" data-animation="fadeInUp" data-animation-delay="2000">
                        <div class="pic owl-carousel" id="my-pic-carousel">
                            <div><img src="img/about/1.jpg" class="img-responsive" alt=""></div>
                            <div><img src="img/about/2.jpg" class="img-responsive" alt=""></div>
                            <div><img src="img/about/3.jpg" class="img-responsive" alt=""></div>
                        </div>
                    </div>
                </div>
                <!-- Middle Column Ends -->
                <!-- Right Column Starts -->
                <div class="col-md-3 personal-info col-right animated" data-animation="fadeInLeft" data-animation-delay="1700">
                    <div class="line1">ADDRESS<br>
                        <span class="line2">MELBOURNE, AUSTRALIA</span> 
                    </div>
                    <div class="line1">PHONE<br>
                        <span class="line2">+123-456-7890</span> 
                    </div>
                    <div class="line1">EMAIL<br>
                        <span class="line2">JOHN@JOHNDOE.COM</span> 
                    </div>
                    <div class="line1">WEB<br>
                        <span class="line2">WWW.JOHNDOE.COM</span> 
                    </div>
                </div>
                <!-- Right Column Ends -->
            </div>
            <!-- Row 1 Ends --> 
            <!-- Row 2 Starts -->
            <div class="row">
                <div class="col-md-6 col-md-offset-3 animated" data-animation="fadeInUp" data-animation-delay="2200">
                    <div class="intro">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</div>
                </div>
            </div>
            <div>
                <!-- Row 2 Ends --> 
                <!-- Button Starts -->
                <div class="link-btn"><a href="#myskills"><i class="fa fa-rocket"></i> MY SKILLS</a></div>
                <!-- Button Ends --> 
            </div>
        </div>
    </section>

技能部分的标记：

 <div class="container">
            <!-- Header Starts -->
            <div class="row">
                <div class="col-md-8 col-md-offset-2 section-heading">
                    <div class="heading animated" data-animation="fadeInUp" data-animation-delay="200">MY SKILLS</div>
                    <h1 class="icon-line animated" data-animation="fadeInUp" data-animation-delay="700"><i class="fa fa-rocket"></i></h1>
                    <div class="description animated" data-animation="fadeIn" data-animation-delay="1200">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.</div>
                </div>
            </div>
            <!-- Header Ends -->
            <div class="owl-carousel animated" data-animation="fadeIn" data-animation-delay="1700" id="myskills-carousel">
                <div class="items">
                    <div id="donutchart1" data-percent="80"> </div>
                    <br>
                    Web 
                </div>
                <div class="items">
                    <div id="donutchart2" data-percent="70"> </div>
                    <br>
                    Illustration 
                </div>
                <div class="items">
                    <div id="donutchart3" data-percent="60"> </div>
                    <br>
                    Print 
                </div>
                <div class="items">
                    <div id="donutchart4" data-percent="50"> </div>
                    <br>
                    Photography 
                </div>
                <div class="items">
                    <div id="donutchart5" data-percent="40"> </div>
                    <br>
                    Media 
                </div>
                <div class="items">
                    <div id="donutchart6" data-percent="30"> </div>
                    <br>
                    Photography 
                </div>
                <div class="items">
                    <div id="donutchart7" data-percent="20"> </div>
                    <br>
                    Media 
                </div>
            </div>
            <!-- Button Starts -->
            <div class="link-btn animated" data-animation="fadeInUp" data-animation-delay="2200"><a href="#education"><i class="fa fa-book"></i> EDUCATION</a></div>
            <!-- Button Ends --> 
        </div>

我知道这是真正糟糕的代码。请不要对我大喊大叫。

我搜索了一个解决方案，因此我不必为每个按钮编写代码。有人可以帮帮我吗？

提前致谢...

编辑：我为这些部分添加了标记。但他们很长很抱歉。我只是想在现有页面上实现我的目标。

是的，会有两个以上的菜单按钮。我认为约有6-8个。

我想，该部分内部的标记并不重要，因为我只对该部分进行了处理。

此刻，我正在尝试event.target！好吧，我有点尝试在互联网上找到的所有东西，似乎指向了我的方向。

Answer 1

尝试这样的事情：

$('a[href*="#"]:not([href="#"])').click(function () {
    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {

        // Get href/id
        var target = $(this.hash);

        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

        // Check is target exist
        if (target.length) {
             // Hide current section
             $('section.active').animate({
                 left: '-1170px'
             }, '1500');
             $('section.active').removeClass('active');

             // Show target section
             $(target).animate({
                 left: '0px'
             }, '1500');
             $(target).addClass('active');

             return false;
        }
    }
});

Answer 2

见这里。举了一个小例子。你应该能够轻松地适应你的html结构。

<强> jsfiddle

css代码：

#about { 
    position:absolute;
    left:-1170px;
    width:200px;
}
#myskills {
    position:absolute;
    left:-1170px;
    width:200px;
}
#content {
    position:relative;
    float:left;
    width:100%;
    height:200px;
}

JQ代码

$(".menu-btn").click(function(){
var target = $(this).attr('href');
    $("#content div").animate({left: '-1170px'}, "1500");
    $("#content div").removeClass("active");
    $(target).addClass("active");
    $(target).animate({left: '0px'}, "1500");


});

编辑

从左侧和右侧

请参阅此处JSFIDDLE left or right

css代码：

.sectionID:nth-child(odd) {
  transform:translateX(-1000px);
}
.sectionID:nth-child(even) {
  transform:translateX(1000px);
}
#section-wrapper { 
  position:relative;

}

.sectionID { 
  position:absolute;
  top:0;
  transition:1.5s;
}
.sectionID.active{
  transform:translateX(0px)
}
 body {
  overflow:hidden;
 }

JQ

$(".menu-btn").click(function(event){
var target = $(this).attr('href');
event.preventDefault();

    $(".sectionID").removeClass("active");
    $(target).addClass("active");


    });

如果有帮助请告诉我

如何在单击时将类添加到目标部分

2 个答案: