遍历下一个和上一个 jQuery 选项卡
Traversing Next and 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>
当前 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.expand 的下一个/上一个 li,当它到达当前列表的末尾/开头时。
然后我还需要突出显示带有"已选择"的相应按钮
开发站点可以在 http://deeley.devmode.co.uk/people.html 看到,因为我确定我可能没有多大意义!
如果有人能伸出援手,因为我整天都在兜圈子!
你基本上已经为你完成了代码,因为你的a.expand-person
元素可以满足你的需要。
和上一个箭头只需要找到下一个a.expand-person
并触发对该元素的单击。
相关文章:
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- JQuery覆盖不更改单选选项
- jQuery动态表单显示在select选项上
- Jquery:如何获取所选选项全文(带空格)
- 使用基于文本的 Jquery 选择选项
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 阻止选项卡缓存jquery ui
- 使用Jquery增加选项卡
- 如何在jquery.easytabs.js中获取当前选项卡
- JQuery-停止手风琴链接关闭所有选项卡
- 设置所选选项JQuery
- 防止已选择的选项 Jquery 使用 MYSQL 自动完成
- 动态替换下拉菜单选项jQuery
- 在Chrome和Firefox中选择选项jquery 2.1.1时出错
- 附加逗号分隔的值以选择选项 jQuery
- 忽略选择选项jQuery的值
- 无法在回调时配置选项(jQuery插件)
- 为什么这个自动选择第一个选项jquery脚本在Internet Explorer中不起作用