在导航上删除和添加数据属性答案

【问题标题】：Remove and add data attributes on navigation在导航上删除和添加数据属性
【发布时间】：2015-02-26 07:44:39
【问题描述】：

我想在我的网站上创建一个带有自定义导航的 Bootstrap 轮播。所以我将指示器更改为三个块，其中包含一些文本和一个按钮。

<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”元素时，“数据属性”将被删除，当我单击另一个时，它将再次添加。

或者有更好的方法吗？

【问题讨论】：

标签： jquery html twitter-bootstrap attributes carousel

【解决方案1】：

我现在确实解决了。

$('.slide-nav li').click(function () {
    $(this).removeAttr('data-target');
    $(this).attr('data-target', '#carousel');
    $(".active").attr('data-target', '');
});

唯一可能缺少的是，如果我可以点击链接并直接进入它会很好 - 不必先点击 li 元素来访问链接..

【讨论】：

【解决方案2】：

可能重复

你可以阅读并使用它

Add & remove active class from a navigation link

sample jsfiddleenter code here sample fiddle

【讨论】：

感谢您的回答。这不正是我正在寻找的。活动类已由 Bootstrap 提供，并且在加载站点时位于 li 元素之一上。此时我希望删除数据目标，现在当我单击另一个 li 元素时，数据目标将再次添加到第一个 li 并在单击的元素上删除。