0

我有 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>
4

4 回答 4

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); }
于 2013-02-14T10:15:30.153 回答
0

这将在 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("#", ""));
    });
于 2013-02-14T10:22:02.577 回答
0 
$('ul > li > a').click(function() {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
})

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

#home.active { ... }
#about.active { ... }
etc.
于 2013-02-14T10:16:11.633 回答
0

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

("按钮").click(函数(){

//获取按钮id或类

// 在 if 语句中使用上面的 id 或 class 并做你喜欢做的事

});

于 2013-02-14T10:19:28.800 回答