Question

我有5个按钮，所有按钮都有不同的类（每个按钮都有花哨的图像），我希望能够在单击按钮时打开特定的活动类，在单击按钮时关闭。 ` - 按钮的HTML -

 <ul>
 <li class="home">
  <a href="#home" class="buttonhome">HOME</a>
 </li>

 <li class="about">
   <a href="#about" class="buttonabout">ABOUT US</a>
 </li>

 <li class="otres">
 <a href="#otres" class="buttonotres">OTRES BEACH</a>
 </li>

 <li class="rates">
   <a href="#rates" class="buttonrates">FACILITIES <br /> & RATES</a>
 </li>

 <li class="contact">
  <a href="#contact" class="buttoncontact">CONTACT US</a>
 </li>
 </ul>

`

我可以设法让jQuery切换一个按钮的类，但是要么把它变成if语句还是更好。

 --Jquery--

<script type="text/javascript">
    $(".buttonhome").click( function() {
        $(".activehome").removeClass("activehome");
        $(this).parent("li").addClass("activehome");
    });
</script>

Answer 1

我会给你的<ul>一个班级或一个ID，并且只给所有<li>个活跃的班级。

 <ul id="menu">
 <li class="home">
  <a href="#home" class="buttonhome">HOME</a>
 </li>

 <li class="about">
   <a href="#about" class="buttonabout">ABOUT US</a>
 </li>

 <li class="otres">
 <a href="#otres" class="buttonotres">OTRES BEACH</a>
 </li>

 <li class="rates">
   <a href="#rates" class="buttonrates">FACILITIES <br /> & RATES</a>
 </li>

 <li class="contact">
  <a href="#contact" class="buttoncontact">CONTACT US</a>
 </li>
 </ul>

JavaScript：

<script type="text/javascript">
    $("ul#menu li a").on('click', function() {
        $("ul#menu li.active").removeClass("active");
        $(this).parent("li").addClass("active");
    });
</script>

CSS：

li.home { background-image: url(image1.jpg); }
li.home.active { background-image: url(image2.jpg); }

Answer 2

$('ul > li > a').click(function() {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
})

由于您的链接已经有ID，因此没有理由使用唯一的活动类，因为您可以使用以下方式设置样式：

#home.active { ... }
#about.active { ... }
etc.

Answer 3

你可以实现类似下面的逻辑;

（ “链接”）。单击（函数（）{

//获取按钮ID或类

//在if语句中使用上述id或类并执行您想要执行的操作

}）;

Answer 4

这将在li上添加“activehome”，“activeabout”，“activeotres”，“activerates”，“activecontact”类，具体取决于您单击的按钮，如果单击其他按钮则删除。

$('ul li').find('a').on('click', function () {
        $('ul li').find('a').each(function () {
            $(this).parent().removeClass('active' + $(this).attr('href').replace("#", ""));
        });
        $(this).parent().addClass('active' + $(this).attr('href').replace("#", ""));
    });

Jquery if语句用于不同的分类按钮

4 个答案: