0

ボタンがクリックされたときに特定のアクティブなクラスをオンにし、別のボタンがクリックされたときにオフにできるようにしたいです。` -- ボタンの 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 を使用して 1 つのボタンのクラスを切り替えることはできますが、それを 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 
$('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 またはクラスを取得する

// 上記の ID またはクラスを if ステートメントで使用し、やりたいことを実行します

});

于 2013-02-14T10:19:28.800 に答える
0

これにより、クリックしたボタンに応じてクラス「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 に答える