Question

我正在构建一个单页网站，我有一个水平菜单，每个li在鼠标上方或单击时都有不同的颜色，这样就可以了。但是，我想在单击菜单时将页眉更改为与菜单相同的颜色。到目前为止我有这个脚本：

 JQuery
  $(document).ready(function(e) { //script to change menu color
     $('[id*="button"]').click(function(){
       $('.nav li').removeClass();
  $(this).toggleClass('selected'+$('a',this).attr('class'));
       });
  });
  $(document).ready(function(e) { //script to change page header color
     $(".nav li").on('click', function(){
       $('.page-header').addClass('selected'+$('a',this).attr('class'));
        $('.page-header').removeClass('selected');
    });
 });

 HTML
    <div class="menu">
        <ul class="nav">
           <li id="yellowbutton"><a href="#" class="yellow">Home</a></li>
           <li id="redbutton"><a href="#" class="red">Product</a></li>
           <li id="purplebutton"><a href="#" class="purple">Service</a></li>
           <li id="greenbutton"><a href="#" class="green">Support</a></li> 
           <li id="orangebutton"><a href="#" class="orange">Contact</a></li>
           <li id="bluebutton"><a href="#" class="blue">About</a></li>
       </ul>  
   </div><!-- menu Ends Here -->

问题是更改页眉的脚本无法正常工作。有些人可以告诉我哪里出了问题，任何帮助都会受到赞赏。

Answer 1

在您的代码中，您只是添加了类。你必须

$('.page-header').css('background-color', $('a',this).attr('class'))

请注意，代码中存在多个代码异味。

将页眉颜色更改为与菜单相同

1 个答案: