Question

我想在用户点击链接时更改两个不同.css文件之间的页面样式。

单击链接时，我希望加载新样式。当第二次单击时，我希望加载默认样式。（换句话说，我希望能够在点击事件中在两个不同的样式表之间切换。）

$(function(){
   $('.default').click(function(){
      $('#link').attr('href', 'defaultStyle' );
      $('.default').addClass('new').removeClass('default');
   });

});
$(function(){
   $('.new').click(function(){
      $('#link').attr('href', 'secondStyle' );
      $('.new').addClass('default').removeClass('new');
   });
});

上面的代码改变了样式一次，但第二个块不起作用。

我该如何解决这个问题？ TIA。

Answer 1

尝试

$('.new').live('click',function(){});

http://api.jquery.com/live/

Answer 2

这是：

  $('.new').addClass('default').removeClass('reader');

原定于：

  $('.new').addClass('default').removeClass('new');

另外，您是否检查过firefox / fiddler / etc以查看浏览器是否正在尝试下载第二个样式表？

Answer 3

点击处理程序将分配给当前存在的元素。当您执行第二个块时（仅在您单击.new之后），.default尚不存在。

只需切换课程：

$(function(){
   $('.default').click(function(){
      $('#link').attr('href', function(i, v) {
           return v === 'defaultStyle' ? 'secondStyle' : 'defaultStyle';
      });

      $(this).toggleClass('new').toggleClass('default');
   });
});

Answer 4

原因是jQuery选择器只在首次执行JavaScript时才使用.new查找元素。

你应该研究jQuery.live（）http://api.jquery.com/live/

Answer 5

你可以使用jquery轻松完成，这是一个例子，

$(document).ready(function(){

  $('#blue').click(function(event) {
    $('#text').css('background-color','blue');
  });

  $('#grey').click(function(event) {
    $('#text').css('background-color','grey');
  });

});
<div id="text" style="background-color:grey;" >Hello World</div>
<div id="blue" style="cursor:pointer" >blue</div>
<div id="grey" style="cursor:pointer" >grey</div>

如何使用jQuery从一个样式表更改为另一个样式表？

5 个答案: