遍历下一个和前一个jQuery选项卡

时间:2016-04-21 15:53:39

标签: javascript jquery html tabs

我有一个奇怪的设计,然后被编码为:

<div class="white-wrap row people-grid">
   <ul class="people-list  row">
      <li class="person row">
         <div class="inner row">
            <div class="image"> <img src="images/peterHarthill.png" alt="peterHarthill" width="240" height="226"> </div>
            <div class="info"> <span class="name"><span>Peter</span> <span>Hartill</span></span> <span class="role">Chairman</span> <a class="selected expand-person" href="#pete1">Toggle more</a> </div>
         </div>
      </li>
      <li class="person row">
         <div class="inner row">
            <div class="image"> <img src="images/peterHarthill.png" alt="peterHarthill" width="240" height="226"> </div>
            <div class="info"> <span class="name"><span>Peter</span> <span>Hartill</span></span> <span class="role">Chairman</span> <a  class="expand-person" href="#pete2">Toggle more</a> </div>
         </div>
      </li>
      <li class="person row">
         <div class="inner row">
            <div class="image"> <img src="images/peterHarthill.png" alt="peterHarthill" width="240" height="226"> </div>
            <div class="info"> <span class="name"><span>Peter</span> <span>Hartill</span></span> <span class="role">Chairman</span> <a  class="expand-person" href="#pete3">Toggle more</a> </div>
         </div>
      </li>
   </ul>
   <ul class="expanded ">
      <li class="tab active" id="pete1">
         <article class="expand row">
            <div class="info">
               <h1>Perter Hartill</h1>
               <h2>Chairman</h2>
               <p>Peter was a Senior Audit Partner with Deloitte, based in their Birmingham office, having retired on 31st May 2008.  Peter was with Deloitte for over 40 years based mainly in the Midlands but also spent time at their offices in London and Washington US.  During his career he acted for most of Deloitte's major Midlands clients and one of his specialist areas was the real estate sector.
                  Peter became Chairman of Deeley on 1st January 2009.
                  Peter is married with 2 step-children and enjoys golf and other sports. 
               </p>
            </div>
            <aside>
               <ul class="qualifications">
                  <li><strong>Qualifications</strong> Chartered Accountant</li>
                  <li><strong>Professional Affiliations</strong> FCA</li>
                  <li><strong>Start Date</strong> September 1988</li>
               </ul>
               <div class="share row">
                  <h2>Share</h2>
                  <ul>
                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fa fa-twitter fa-6" aria-hidden="true"></i></a></li>
                     <li class="linkedin"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                  </ul>
               </div>
            </aside>
         </article>
         <span class="collapse-btn">collapse</span> <span class="collapse-next-btn">next</span> <span class="collapse-prev-btn">prev</span> 
      </li>
      <li  class="tab" id="pete2">
         <article class="expand row">
            <div class="info">
               <h1>Perter Hartill</h1>
               <h2>Chairman</h2>
               <p>Peter was a Senior Audit Partner with Deloitte, based in their Birmingham office, having retired on 31st May 2008.  Peter was with Deloitte for over 40 years based mainly in the Midlands but also spent time at their offices in London and Washington US.  During his career he acted for most of Deloitte's major Midlands clients and one of his specialist areas was the real estate sector.
                  Peter became Chairman of Deeley on 1st January 2009.
                  Peter is married with 2 step-children and enjoys golf and other sports. 
               </p>
            </div>
            <aside>
               <ul class="qualifications">
                  <li><strong>Qualifications</strong> Chartered Accountant</li>
                  <li><strong>Professional Affiliations</strong> FCA</li>
                  <li><strong>Start Date</strong> September 1988</li>
               </ul>
               <div class="share row">
                  <h2>Share</h2>
                  <ul>
                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fa fa-twitter fa-6" aria-hidden="true"></i></a></li>
                     <li class="linkedin"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                  </ul>
               </div>
            </aside>
         </article>
         <span class="collapse-btn">collapse</span> <span class="collapse-next-btn">next</span> <span class="collapse-prev-btn">prev</span> 
      </li>
      <li  class="tab" id="pete3">
         <article class="expand row">
            <div class="info">
               <h1>Perter Hartill</h1>
               <h2>Chairman</h2>
               <p>Peter was a Senior Audit Partner with Deloitte, based in their Birmingham office, having retired on 31st May 2008.  Peter was with Deloitte for over 40 years based mainly in the Midlands but also spent time at their offices in London and Washington US.  During his career he acted for most of Deloitte's major Midlands clients and one of his specialist areas was the real estate sector.
                  Peter became Chairman of Deeley on 1st January 2009.
                  Peter is married with 2 step-children and enjoys golf and other sports. 
               </p>
            </div>
            <aside>
               <ul class="qualifications">
                  <li><strong>Qualifications</strong> Chartered Accountant</li>
                  <li><strong>Professional Affiliations</strong> FCA</li>
                  <li><strong>Start Date</strong> September 1988</li>
               </ul>
               <div class="share row">
                  <h2>Share</h2>
                  <ul>
                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fa fa-twitter fa-6" aria-hidden="true"></i></a></li>
                     <li class="linkedin"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                  </ul>
               </div>
            </aside>
         </article>
         <span class="collapse-btn">collapse</span> <span class="collapse-next-btn">next</span> <span class="collapse-prev-btn">prev</span> 
      </li>
   </ul>
   <ul class="people-list row">
      <li class="person row">
         <div class="inner row">
            <div class="image"> <img src="images/peterHarthill.png" alt="peterHarthill" width="240" height="226"> </div>
            <div class="info"> <span class="name"><span>Peter</span> <span>Hartill</span></span> <span class="role">Chairman</span> <a data-content="inbox" class="expand-person" href="#pete4">Toggle more</a> </div>
         </div>
      </li>
      <li class="person row">
         <div class="inner row">
            <div class="image"> <img src="images/peterHarthill.png" alt="peterHarthill" width="240" height="226"> </div>
            <div class="info"> <span class="name"><span>Peter</span> <span>Hartill</span></span> <span class="role">Chairman</span> <a data-content="peter" class="expand-person" href="#pete5">Toggle more</a> </div>
         </div>
      </li>
      <li class="person row">
         <div class="inner row">
            <div class="image"> <img src="images/peterHarthill.png" alt="peterHarthill" width="240" height="226"> </div>
            <div class="info"> <span class="name"><span>Peter</span> <span>Hartill</span></span> <span class="role">Chairman</span> <a data-content="peter" class="expand-person" href="#pete6">Toggle more</a> </div>
         </div>
      </li>
   </ul>
   <ul class="expanded cd-tabs-content">
      <li  class="tab" id="pete4">
         <article class="expand row">
            <div class="info">
               <h1>Perter Hartill</h1>
               <h2>Chairman</h2>
               <p>Peter was a Senior Audit Partner with Deloitte, based in their Birmingham office, having retired on 31st May 2008.  Peter was with Deloitte for over 40 years based mainly in the Midlands but also spent time at their offices in London and Washington US.  During his career he acted for most of Deloitte's major Midlands clients and one of his specialist areas was the real estate sector.
                  Peter became Chairman of Deeley on 1st January 2009.
                  Peter is married with 2 step-children and enjoys golf and other sports. 
               </p>
            </div>
            <aside>
               <ul class="qualifications">
                  <li><strong>Qualifications</strong> Chartered Accountant</li>
                  <li><strong>Professional Affiliations</strong> FCA</li>
                  <li><strong>Start Date</strong> September 1988</li>
               </ul>
               <div class="share row">
                  <h2>Share</h2>
                  <ul>
                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fa fa-twitter fa-6" aria-hidden="true"></i></a></li>
                     <li class="linkedin"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                  </ul>
               </div>
            </aside>
         </article>
         <span class="collapse-btn">collapse</span> <span class="collapse-next-btn">next</span> <span class="collapse-prev-btn">prev</span> 
      </li>
      <li  class="tab" id="pete5">
         <article class="expand row">
            <div class="info">
               <h1>Perter Hartill</h1>
               <h2>Chairman</h2>
               <p>Peter was a Senior Audit Partner with Deloitte, based in their Birmingham office, having retired on 31st May 2008.  Peter was with Deloitte for over 40 years based mainly in the Midlands but also spent time at their offices in London and Washington US.  During his career he acted for most of Deloitte's major Midlands clients and one of his specialist areas was the real estate sector.
                  Peter became Chairman of Deeley on 1st January 2009.
                  Peter is married with 2 step-children and enjoys golf and other sports. 
               </p>
            </div>
            <aside>
               <ul class="qualifications">
                  <li><strong>Qualifications</strong> Chartered Accountant</li>
                  <li><strong>Professional Affiliations</strong> FCA</li>
                  <li><strong>Start Date</strong> September 1988</li>
               </ul>
               <div class="share row">
                  <h2>Share</h2>
                  <ul>
                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fa fa-twitter fa-6" aria-hidden="true"></i></a></li>
                     <li class="linkedin"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                  </ul>
               </div>
            </aside>
         </article>
      </li>
      <li  class="tab" id="pete6">
         <article class="expand row">
            <div class="info">
               <h1>Perter Hartill</h1>
               <h2>Chairman</h2>
               <p>Peter was a Senior Audit Partner with Deloitte, based in their Birmingham office, having retired on 31st May 2008.  Peter was with Deloitte for over 40 years based mainly in the Midlands but also spent time at their offices in London and Washington US.  During his career he acted for most of Deloitte's major Midlands clients and one of his specialist areas was the real estate sector.
                  Peter became Chairman of Deeley on 1st January 2009.
                  Peter is married with 2 step-children and enjoys golf and other sports. 
               </p>
            </div>
            <aside>
               <ul class="qualifications">
                  <li><strong>Qualifications</strong> Chartered Accountant</li>
                  <li><strong>Professional Affiliations</strong> FCA</li>
                  <li><strong>Start Date</strong> September 1988</li>
               </ul>
               <div class="share row">
                  <h2>Share</h2>
                  <ul>
                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fa fa-twitter fa-6" aria-hidden="true"></i></a></li>
                     <li class="linkedin"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                  </ul>
               </div>
            </aside>
         </article>
         <span class="collapse-btn">collapse</span> <span class="collapse-next-btn">next</span> <span class="collapse-prev-btn">prev</span> 
      </li>
   </ul>
</div>

当前的jQuery:

jQuery(document).ready(function() {
   jQuery('.people-grid a').on('click', function(e){
      var currentAttrValue = jQuery(this).attr('href');
      jQuery('.selected').removeClass('selected');
      jQuery(this).addClass('selected');

      // Show/Hide Tabs
      jQuery('.active').removeClass('active');
      jQuery('.people-grid ' + currentAttrValue).addClass('active');        
      e.preventDefault();
   });

   jQuery('.collapse-next-btn').on('click', function(e){        
      jQuery('.active').removeClass('active'); 
      jQuery(this).parent('.tab').next().addClass('active');
   });  
});

它基本上是一个标签设置,但由于它的设计方式,它们必须分开。

我需要下一个和上一个按钮从当前li.tab中删除活动类并将其添加到下一个。我可以在相同的ul内完成它,但是当它到达当前列表的结束/开始时,不能选择下一个ul.expanded的下一个/上一个li。

然后我还需要使用&#34;选择&#34;

突出显示相应的按钮

开发网站可以在http://deeley.devmode.co.uk/people.html看到,因为我确定我可能没有多大意义!

如果有人可以伸出援助之手,因为我整天都在转圈!

1 个答案:

答案 0 :(得分:0)

您基本上已经为您完成了代码,因为您的a.expand-person元素可以满足您的需求。

下一个和上一个箭头只需找到下一个a.expand-person并触发该元素的点击。