在导航上删除并添加数据属性

时间:2015-02-26 07:44:40

标签: jquery html twitter-bootstrap attributes carousel

我想在我的网站上使用自定义导航创建一个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>

导航工作得很好但是当我想点击一个按钮来访问链接时,由于&#34;数据目标&#34;它无法正常工作。如果我删除它,我可以点击链接。

现在我想点击&#34; li&#34;具有活动类的元素,&#34;数据属性&#34;将被删除,当我点击另一个时,它将再次添加。

或者是否有更好的方法?

2 个答案:

答案 0 :(得分:2)

我现在解决了。

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

只有可能缺少的是,如果我只是点击链接并直接获取它就会很好 - 首先不必点击li元素来访问链接..

答案 1 :(得分:0)

可能重复

您可以阅读并使用此

Add & remove active class from a navigation link

sample jsfiddle enter code here sample fiddle