我想在我的网站上创建一个带有自定义导航的 Bootstrap 轮播。因此,我将指示器更改为三个 block ,其中包含一些文本和一个按钮。
<div class="container">
<div class="row">
<ul class="slide-nav">
<li data-target="#carousel" data-slide-to="0" class="col-sm-4 slide-first">
<div class="nav-element">
<i class="fa fa-star symbol-big"></i>
<h3>Leistungen</h3>
<a href="#" class="btn btn-primary btn-block">Mehr erfahren</a>
</div>
</li>
<li data-target="#carousel" data-slide-to="1" class="col-sm-4 slide-middle active">
<div class="nav-element">
<i class="fa fa-thumbs-up symbol-big"></i>
<h3>Ihre Vorteile</h3>
<a href="#" class="btn btn-primary">Mehr erfahren</a>
</div>
</li>
<li data-target="#carousel" data-slide-to="2" class="col-sm-4 slide-last">
<div class="nav-element">
<i class="fa fa-users symbol-big"></i>
<h3>Unser Team</h3>
<a href="#" class="btn btn-primaryk">Mehr erfahren</a>
</div>
</li>
</ul>
</div>
</div>
导航工作正常,但当我想单击按钮访问链接时,由于“数据目标”,它无法工作。如果我删除它,我可以点击链接。
现在我想实现,当我单击具有事件类的“li”元素时,“数据属性”将被删除,当我单击另一个元素时,它将再次添加。
或者有更好的方法吗?
最佳答案
我现在已经解决了。
$('.slide-nav li').click(function () {
$(this).removeAttr('data-target');
$(this).attr('data-target', '#carousel');
$(".active").attr('data-target', '');
});
唯一可能缺少的是,如果我可以单击链接并直接访问它,那就太好了 - 而不是首先必须单击 li 元素来访问链接..
关于jquery - 删除和添加导航上的数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28736944/