Question

我正在尝试编写一个脚本，当您点击一个标签时，它会添加一个类＆quot; menu-toc-current＆＃39;相关的li元素。（显然在单击下一个项目时删除此类）。所以点击链接猫它将类添加到li cats等。

到目前为止我的代码是......

<ul id="menu-toc">
    <li>Cat</li>
    <li>Dog</li> 
    <li>Bird</li> 
</ul>

<a class="alive">Show me Cats</a>
<a class="alive">Show me Dogs</a>
<a class="alive">Show me Birds</a>

到目前为止我的JQuery是......

$('a.alive').click( function(){
    $('ul#menu-toc').toggleClass('menu-toc-current');
});

Answer 1

我会为每个链接添加data-属性，引用您要切换的li的编号或（更好）该元素的ID。

$('a.alive').click(function() {
  var elnum = $(this).data('elnum');
  $('ul#menu-toc li').removeClass('menu-toc-current')
        .eq(elnum).toggleClass('menu-toc-current');
});

.menu-toc-current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-toc">
  <li>Cat</li>
  <li>Dog</li>
  <li>Bird</li>
</ul>

<a href="javascript:" class="alive" data-elnum="0">Show me Cats</a>
<a href="javascript:" class="alive" data-elnum="1">Show me Dogs</a>
<a href="javascript:" class="alive" data-elnum="2">Show me Birds</a>

http://api.jquery.com/data

然而，使用ID而不是数字是有利的，因为它可以更容易地重新排列列表：

$('a.alive').click(function() {
  var elid = $(this).data('elid');
  $('ul#menu-toc li').removeClass('menu-toc-current')
        .filter('#'+elid).toggleClass('menu-toc-current');
});

.menu-toc-current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-toc">
  <li id="cat">Cat</li>
  <li id="dog">Dog</li>
  <li id="bird">Bird</li>
</ul>

<a href="javascript:" class="alive" data-elid="cat">Show me Cats</a>
<a href="javascript:" class="alive" data-elid="dog">Show me Dogs</a>
<a href="javascript:" class="alive" data-elid="bird">Show me Birds</a>

现在，如果您想稍后在“狗”之后移动“猫”，则无需像data-elid那样更改data-elnum属性。

Answer 2

如果我理解你的问题是正确的，你可以使用这样的内联代码来实现：

<ul id="menu-toc">
    <li id="cat">Cat</li>
    <li id="dog">Dog</li> 
    <li id="bird">Bird</li> 
</ul>

<a class="alive" onclick="$('cat').toggleClass('menu-toc-current')">Show me Cats</a>
<a class="alive" onclick="$('dog').toggleClass('menu-toc-current')">Show me Dogss</a>
<a class="alive" onclick="$('bird').toggleClass('menu-toc-current')">Show me Birds</a>

将代码和标记分开是很好的方法。你可以这样做：

<ul id="menu-toc">
    <li id="cat">Cat</li>
    <li id="dog">Dog</li> 
    <li id="bird">Bird</li> 
</ul>

<a class="alive" id="cat-link">Show me Cats</a>
<a class="alive" id="dog-link">Show me Dogss</a>
<a class="alive" id="bird-link">Show me Birds</a>

<script>
    $("cat-link").click(function(){$('cat').toggleClass('menu-toc-current')});
    $("dog-link").click(function(){$('dog').toggleClass('menu-toc-current')});
    $("bird-link").click(function(){$('bird').toggleClass('menu-toc-current')});
</script>

如果您有许多链接，并且不希望通过像＃34; cat＆＃34;和＆＃34; dog＆＃34;，你可以这样做：

<ul id="menu-toc">
    <li id="cat" data-index="1">Cat</li>
    <li id="dog" data-index="2">Dog</li> 
    <li id="bird" data-index="3">Bird</li> 
</ul>

<a class="alive animal-link" data-index="1">Show me Cats</a>
<a class="alive animal-link" data-index="2">Show me Dogss</a>
<a class="alive animal-link" data-index="3">Show me Birds</a>

<script>
    $(".animal-link").click(function(){
        $("#menu-toc").find("[data-index='" + $(this).attr("data-index")+ "']").toggleClass("menu-toc-current");
    });
</script>

Answer 3

试试这个

＆＃13;

 $( document ).ready(function() {

     $(".alive").click(function(){      
        var id = $(this).attr('id');
        $("ul#menu-toc li").removeClass('red');
        $("#" + id + "-li").addClass('red');
     });
     
});

＆＃13;

.red {
    color:red;
}

＆＃13;

<ul id="menu-toc">
    <li id="cats-li">Cat</li>
    <li id="dogs-li">Dog</li> 
    <li id="birds-li">Bird</li> 
</ul>

<a class="alive" id="cats" href="#">Show me Cats</a>
<a class="alive" id="dogs" href="#">Show me Dogss</a>
<a class="alive" id="birds" href="#">Show me Birds</a>

＆＃13;

Answer 4

我认为您正在尝试手风琴菜单：http://jsfiddle.net/nothrem/mcgv4gok/

<nav>
    <div id="navContainer">
        <ul>
            <li>
            <a href='' class='tabButton' data-openTab='1'>1</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='2'>2</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='3'>3</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='4'>4</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='5'>5</a>
            </li>
        </ul>
    </div>
    <div id = "tabCont" class="tabContainer">
        <div id="1">1
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="2" >2
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="3" > 3
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="4" >  4
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="5" >   5
            <a href="" class="closeButton"> CLOSE </a>
        </div>
    </div>
</nav>

    document.menuIsOpen = false;
    $('.tabContainer > div').hide();
    $('.tabButton').click(function(event) {
        var
            open = $("#" + $(this).attr('data-openTab')),
            isOpened = open.is('.opened');

        event.preventDefault();
        if (document.menuIsOpen) {
            document.menuIsOpen = false;
            $('.opened').hide("slow").removeClass('opened');
        }
        if (!isOpened) {
            document.menuIsOpen = true;
            open.addClass('opened').show("slow").css("display", "block");
        }
    });
    $('.closeButton').click(function(event) {
        event.preventDefault();
        $('.opened').hide("slow").removeClass('opened');
    });
    $('.tabContainer > div').hide();

如何使用JQuery数组向li添加类？

4 个答案: