0

好吧，我想为我 ul 的所有 li 添加类，但我不知道为什么它不起作用。

我的CSS 代码：

.vnav-menu li.selected {
    background:#fff;
}

这是我的html代码。

<ul class="vnav-menu">  <!-- Initiates Showing/Hiding Dashboard Containers -->
    <li onclick="vnav_function('current_offer');"   id="current_offer_li"   class="selected">   <a> CURRENT OFFERS  </a></li>
    <li onclick="vnav_function('draft_offer');"     id="draft_offer_li">                        <a> DRAFT OFFERS    </a></li>
    <li onclick="vnav_function('expired_offer');"   id="expired_offer_li">                      <a> EXPIRED OFFERS  </a></li>
    <li onclick="vnav_function('offer_code');"      id="offer_code_li">                         <a> OFFER CODE      </a></li>
    <li onclick="vnav_function('title');"           id="title_li">                              <a> TITLE           </a></li>
    <li onclick="vnav_function('schedule');"        id="schedule_li">                           <a> SCHEDULE        </a></li>
    <li onclick="vnav_function('offer_type');"      id="offer_type_li">                         <a> OFFER TYPE      </a></li>
</ul>

这是我的函数vnav_function()的代码

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
    $('.vnav-menu li').each(function(i)
    {
       $(this).attr('id').addClass("selected");
    });
}

好吧，由于某种原因，它不会工作。对这些东西有什么想法吗？

4

5 回答 5

2

.attr('id')返回一个字符串。我认为您想使用 ID 进行比较：

if ($(this).attr('id') == $(data.target).attr('id') {
    $(this).addClass('selected');
}

但是，这样做会容易得多

function vnav_function(data) {
    $(this).addClass('selected');
}

...而且这样做会更容易

<ul class="vnav-menu">  <!-- Initiates Showing/Hiding Dashboard Containers -->
    <li id="current_offer_li"   class="selected">   <a> CURRENT OFFERS  </a></li>
    <li id="draft_offer_li">                        <a> DRAFT OFFERS    </a></li>
    <li id="expired_offer_li">                      <a> EXPIRED OFFERS  </a></li>
    <li id="offer_code_li">                         <a> OFFER CODE      </a></li>
    <li id="title_li">                              <a> TITLE           </a></li>
    <li id="schedule_li">                           <a> SCHEDULE        </a></li>
    <li id="offer_type_li">                         <a> OFFER TYPE      </a></li>
</ul>

$(".vnav-menu li").on('click', function () {
    $(this).addClass('selected');
});

你甚至可能想做：

$(".vnav-menu li").on('click', function () {
    $(".vnav-menu").removeClass('selected');
    $(this).addClass('selected');
});
于 2013-02-20T04:34:07.050 回答
1

您正在尝试对addClass返回的字符串调用该方法$(this).attr('id')。尝试对返回的 jQuery 集合使用 addClass 方法$(this)：

$(this).addClass("selected");
于 2013-02-20T04:31:33.877 回答
1

没有 jQuery：

function getElementsByCSSSelector(s) {
    return Array.prototype.slice.call(document.querySelectorAll(s));
}

getElementsByCSSSelector('.vnav-menu li').forEach(function(li) {
    li.classList.add("selected");
});
于 2013-02-20T04:42:21.200 回答
0 
function vnav_function(data) {  //Showing/Hiding Dashboard Containers
  $('.vnav-menu li').each(function()
  {
     $(this).addClass("selected");
  });
 }

要不就：

function vnav_function(data) {  //Showing/Hiding Dashboard Containers
   $('.vnav-menu li').addClass('extra');
}
于 2013-02-20T04:32:21.497 回答
0

好吧，无需使用.each，$('.vnav-menu li').addClass('extra');这可以添加class到每个li内部ul.vnav-menu

于 2013-02-20T04:35:33.627 回答