Как добавить класс в целевой раздел при нажатии

Я новичок в jquery, и у меня проблема. То, чего я пытаюсь достичь:Как добавить класс в целевой раздел при нажатии

Я разделил свою страницу на разделы. Каждый раздел, за исключением домашнего раздела, находится за пределами экрана. Если кто-то нажимает на кнопку «около», например, в поле «поток» должен отображаться раздел «about», который в настоящий момент является «текущим». Если вы нажмете на другую ссылку, навыки, например, текущий 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">[email protected]</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>

Я знаю, что это действительно ужасный письменный код. Пожалуйста, не кричите на меня.

Я искал решение, поэтому мне не нужно писать код для каждой кнопки. Может кто-то мне помочь, пожалуйста??

Заранее спасибо ...

EDIT: Я положил в разметке для секций. Но они довольно долго, извините. Я просто пытаюсь достичь своей цели на существующей странице.

И да, будет более двух кнопок меню. Мне кажется, что-то около 6-8.

Я думал, что разметка внутри раздела не важна, потому что я рассматриваю только раздел.

На данный момент, я стараюсь event.target! Ну, я вроде как пытаюсь все, что могу найти в Интернете, и что, кажется, указывает на мое направление.

источник

2016-07-01 Buntstiftmuffin

Вы можете делиться полным html (с помощью div и divs)? а также css для них? –

у вас будет 2 кнопки меню или будет еще больше? – vijayP

ответили ниже. надеюсь, что это трюк –

посмотреть здесь. сделал небольшой пример. вы должны легко адаптировать его к своей структуре 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"); 


});

EDIT

слева и справа

посмотреть здесь 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; 
}

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

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


    });

Пожалуйста, дайте мне знать, если это поможет

источник

2016-07-01 10:41:51

Ваш #content - это обертка вокруг всех div. Я пытаюсь сказать, что ваш контент - отдельный div, который всегда находится в фоновом режиме. все остальные divs просто плавают над ним. Но да, вообще, это то, что я пытаюсь сделать. Есть ли возможность позволить дивизиям плавать слева и справа? Как первый слева, следующий справа и так далее? – Buntstiftmuffin

есть. как вы можете видеть в html. Я сделал обертку вокруг двух div. поэтому я могу поместить позицию относительно позиции абсолюта divs –

извините, пришлось отредактировать мой ответ ... Я нажал кнопку enter слишком быстро .. – Buntstiftmuffin

попробовать что-то вроде этого:

$('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; 
     } 
    } 
});

источник

2016-07-01 10:38:40

спасибо! это работает, но он немного отсталый, активная секция входит в поле зрения 1/3 и останавливается на мгновение, затем она продолжается до полного просмотра ... Знаете почему? – Buntstiftmuffin

Как добавить класс в целевой раздел при нажатии

ответ

Смежные вопросы