Question

我想要做的是将菜单中的第一个链接标记为活动，或者更好地说，我需要它具有特定的CSS设置。如果我点击它时不会使用jquery将这些css设置添加到每个链接（简单的菜单=当你点击它，它会改变颜色，......），那对我来说会很容易。所以我需要在css中标记的第一个链接（正如你在代码中看到的那样...）当我点击其他菜单链接时，第一个链接进入正常的css设置。这是我的代码，我欢迎任何建议。

编辑：顺便说一句，第一个链接也标有rel =“sl1”...如果它对解决方案有用...

 $(document).ready(function()
                {

                    //prvy odkaz musi byt uz oznaceny pri nacitani stranky
                    $('#menu-vertikal li:first-of-type').addClass('aktivny-link');
                      $('#menu-vertikal li a').click(function () {
                      $('#menu-vertikal li.aktivny-link').removeClass('aktivny-link');
                      $('#menu-vertikal li').eq($(this).parent().index()).addClass('aktivny-link');

                    }); 



                    //zaciatok prepinania obsahu

                    $('#menu-vertikal ul a').on('click', function(){
                           var target = $(this).attr('rel');
                           $("#"+target).show().siblings("div").hide();
                        });
                });

Answer 1

使用您选择的活动菜单属性创建一个css块，然后使用jQuery .addClass来应用它。

＆＃13;

$(document).ready(function() {

  $('li:first-of-type').addClass('current');
  $('li a').click(function() {
    $('li.current').removeClass('current');
    $('.content:visible').hide();
    $('.content').eq($(this).parent().index()).show();
    $('li').eq($(this).parent().index()).addClass('current');

  });

});

＆＃13;

.current a {
  color: green;
}
.content {
  width: 100%;
  color: red;
  font-size: 36px;
  font-weight: bold;
  font-family: calibri;
  text-align: center;
}
.content:not(:first-of-type) {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
  <li><a href="#">Blog</a>
  </li>
</ul>

<div class="content">Content one</div>
<div class="content">Content two</div>
<div class="content">Content three</div>
<div class="content">Content four</div>

＆＃13;

注意：我建议使用.addClass，因为它会添加预定义的类，而不是像.css那样添加内联css，而且当你＆＃39;}时，这是不可取的。重新添加了很多属性。

Answer 2

您可以尝试在上述代码之前添加类似的内容。

$("#menu-vertikal ul:first-child a").css({
    // specific css settings for first a link
});

jquery标记第一个链接在菜单中处于活动状态

2 个答案: