如何添加/删除类使用子弹和箭头
How to add/remove class using bullets and arrows
当用户单击其相应的数字或上一个/下一个箭头时,我很难弄清楚如何从div中添加和删除类。
注意第二个项目和第二个导航栏上的'active'类。我希望类被删除,并添加到第一个项目和导航时,用户单击"1"或"上一个"箭头。
.wrap {
display: block;
width: 200px;
margin: 50px auto;
text-align: center;
}
.nav {
margin-bottom: 10px;
}
.nav a {
padding: 5px;
}
.nav a:hover {
font-weight: 900;
cursor: pointer;
}
.nav a.active {
border-bottom: 1px solid black;
font-weight: 900;
}
.prev, .next {
display: inline-block;
padding: 5px;
}
.prev:hover, .next:hover {
font-weight: 900;
cursor: pointer;
}
.items div {
display: none;
padding: 25px;
}
.items .one {
background: red;
}
.items .two {
background: green;
}
.items .three {
background: blue;
}
.items .active {
display: inline-block;
}
<div class="wrap">
<div class="nav">
<a class="one">1</a>
<a class="two active">2</a>
<a class="three">3 </a>
</div>
<div class="items">
<span class="prev"><</span>
<div class="one">ONE</div>
<div class="two active">TWO</div>
<div class="three">THREE</div>
<span class="next">></span>
</div>
</div>
http://codepen.io/bbbenji/pen/WovJEM 你可以试试这样做:
$('.next, .prev').on('click', function() {
var $cur = $(this).closest('.wrap').find('.items div.active');
var $nav = $(this).closest('.wrap').find(' .nav a.active')
if ($(this).hasClass('next')) {
if ($cur.next('div').length === 0) return
$cur.next('div').addClass('active');
$nav.next('a').addClass('active');
} else {
if ($cur.prev('div').length === 0) return
$cur.prev('div').addClass('active');
$nav.prev('a').addClass('active');
}
$cur.removeClass('active')
$nav.removeClass('active')
})
$('.nav a').on('click', function() {
var index = $(this).index();
$(this).closest('.wrap').find('.items div').removeClass('active').eq(index).addClass('active')
$(this).closest('.wrap').find('.nav a').removeClass('active').eq(index).addClass('active')
})
.wrap {
display: block;
width: 200px;
margin: 50px auto;
text-align: center;
}
.nav {
margin-bottom: 10px;
}
.nav a {
padding: 5px;
}
.nav a:hover {
font-weight: 900;
cursor: pointer;
}
.nav a.active {
border-bottom: 1px solid black;
font-weight: 900;
}
.prev,
.next {
display: inline-block;
padding: 5px;
}
.prev:hover,
.next:hover {
font-weight: 900;
cursor: pointer;
}
.items div {
display: none;
padding: 25px;
}
.items .one {
background: red;
}
.items .two {
background: green;
}
.items .three {
background: blue;
}
.items .active {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrap">
<div class="nav">
<a class="one">1</a>
<a class="two active">2</a>
<a class="three">3 </a>
</div>
<div class="items">
<span class="prev"><</span>
<div class="one">ONE</div>
<div class="two active">TWO</div>
<div class="three">THREE</div>
<span class="next">></span>
</div>
</div>
<div class="wrap">
<div class="nav">
<a class="one">1</a>
<a class="two active">2</a>
<a class="three">3 </a>
</div>
<div class="items">
<span class="prev"><</span>
<div class="one">ONE</div>
<div class="two active">TWO</div>
<div class="three">THREE</div>
<span class="next">></span>
</div>
</div>
这是使用index
的另一种方法
var classes = ["one", "two", "three"];
var currentIndex = 1;
$('.next, .prev').on('click', function() {
if ($(this).hasClass('next')) {
if (currentIndex === classes.length - 1) return;
removeAndAddActive(currentIndex, ++currentIndex);
} else {
if (currentIndex === 0) return;
removeAndAddActive(currentIndex, --currentIndex);
}
})
$('.nav a').on('click', function() {
let index = $(this).index();
removeAndAddActive(currentIndex, index);
currentIndex = index;
})
function removeAndAddActive(removeIndex, addIndex) {
$('.' + classes[removeIndex]).removeClass('active');
$('.' + classes[addIndex]).addClass('active');
}
.wrap {
display: block;
width: 200px;
margin: 50px auto;
text-align: center;
}
.nav {
margin-bottom: 10px;
}
.nav a {
padding: 5px;
}
.nav a:hover {
font-weight: 900;
cursor: pointer;
}
.nav a.active {
border-bottom: 1px solid black;
font-weight: 900;
}
.prev,
.next {
display: inline-block;
padding: 5px;
}
.prev:hover,
.next:hover {
font-weight: 900;
cursor: pointer;
}
.items div {
display: none;
padding: 25px;
}
.items .one {
background: red;
}
.items .two {
background: green;
}
.items .three {
background: blue;
}
.items .active {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrap">
<div class="nav">
<a class="one">1</a>
<a class="two active">2</a>
<a class="three">3 </a>
</div>
<div class="items">
<span class="prev"><</span>
<div class="one">ONE</div>
<div class="two active">TWO</div>
<div class="three">THREE</div>
<span class="next">></span>
</div>
</div>
相关文章:
- 使用php或javascript从facebook相册URL中删除多余的部分
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 如何删除多行HTML排列中的空白
- 如何从rails中的代码中删除新行( )
- 删除对HTML元素的拖动
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 按顺序添加和删除类
- iframe正在添加标签,需要删除它们
- 如何在HTML输入字段中添加不可删除的后缀
- addData()从最新图表中删除.js 2.1.3-怎么了
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 删除CKEditor工具栏按钮,但不删除功能
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 正在删除node.js中已验证的网站
- 正在从页面中删除iframe
- 如何从 HTML 查询中删除项目
- 如何在iOS应用程序中从Firebase中删除超过6小时的数据
- 如何添加/删除类使用子弹和箭头
- 需要帮助在Javascript中删除li子弹
- 如何删除Html <隐藏代码的子弹