2016-04-21 11 views
0

ich eine ungerade Design haben, die dann wurde codiert als:Verfahrgeschwindigkeit Next und Previous jQuery 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> 

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

Es ist im Grunde ein Register eingerichtet, sondern auch wegen der Art und Weise es ist so konzipiert, dass sie aufgeteilt werden müssen.

Ich brauche die nächste und vorherige Tasten, um die aktive Klasse aus der aktuellen li.tab zu entfernen und sie zum nächsten hinzuzufügen. Ich kann es innerhalb der gleichen ul tun, aber kann nicht die nächste/vorherige Li der nächsten ul.expanded wählen, wenn es das Ende/den Anfang der aktuellen Liste erreicht.

Ich muss auch dann die entsprechende Taste markieren, mit „ausgewählten“ kann

Die Entwickler-Site unter http://deeley.devmode.co.uk/people.html zu sehen, wie ich sicher bin, habe ich wahrscheinlich viel Sinn nicht gemacht!

Wenn irgendjemand eine Hand leihen kann, wie ich den ganzen Tag im Kreis herumgegangen bin!

Antwort

0

Sie haben im Grunde den Code für Sie getan, weil Ihre a.expand-person Elemente tun, was Sie brauchen.

Die nächsten und vorherigen Pfeile müssen nur die nächste a.expand-person finden und den Klick auf dieses Element auslösen.

Verwandte Themen