Fatal编程技术网

Javascript 风格转换

javascript jquery

Javascript 风格转换,javascript,jquery,styleswitching,Javascript,Jquery,Styleswitching,我对jQuery和Javascript非常陌生，所以我的样式切换程序有问题，css部分可以工作，但脚本不能，我不知道如何使它工作 Javascript： $("#navorin li a").click(function() { $("link.nav").attr("href",$(this).attr('rel')); $("script.nav").attr("src",$(this).attr('role')); }); <ul id="navorin">

我对jQuery和Javascript非常陌生，所以我的样式切换程序有问题，css部分可以工作，但脚本不能，我不知道如何使它工作

Javascript：

$("#navorin li a").click(function() { 
    $("link.nav").attr("href",$(this).attr('rel'));
    $("script.nav").attr("src",$(this).attr('role'));
});

<ul id="navorin">
    <li><a href="#" rel="assets/css/leftmenu.css" role="assets/js/leftmenu.js">Left Menu</a></li>
    <li><a href="#" rel="assets/css/rightmenu.css" role="assets/js/rightmenu.js">Right Menu</a></li>
    <li><a href="#" rel="assets/css/topmenu.css" role="assets/js/topmenu.js">Top Menu</a></li>
    <li><a href="#" rel="assets/css/topmenufixed.css" role="assets/js/topmenufixed.js">Top Menu Fixed</a></li>
</ul>

<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">

    $(window).load(function () {
    $('.sidenav ul > li').click(function (ev) {
        $(this).find('>ul').fadeToggle();
        ev.stopPropagation();
    });
    $('.sidenav ul > li a.back').click(function (ev) {
        $(this).parent().parent().fadeOut();
        ev.stopPropagation();
    });
});
$(window).on("load resize", function () {
  if ($(window).width() <= 768) {
      $(document).on("swiperight", function () {
          $(".sidenav").addClass('sidenavhover');
          $(".overlay").fadeIn();
          $(".sidenav li.user").addClass('usershow');
      });
      $(document).on("swipeleft", function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
  }
  if ($(window).width() >= 769) {
      $(".sidenav").mouseover(function () {
          $(".sidenav").addClass('sidenavhover');
          $(".sidenav li.user").addClass('usershow');
          $(".overlay").fadeIn();
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").slideUp(100);
          $(".sidenav li.user").removeClass('usershow');
          $(".overlay").fadeOut();
      });
  }  if ($(window).height() < 458) {
      $(".sidenav ul > li.logout").css('position', 'relative');
      $(".sidenav ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 458) {
      $(".sidenav ul > li.logout").css('position', 'absolute');
      $(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
  if ($(window).height() < 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
});
HTML：

$("#navorin li a").click(function() { 
    $("link.nav").attr("href",$(this).attr('rel'));
    $("script.nav").attr("src",$(this).attr('role'));
});

<ul id="navorin">
    <li><a href="#" rel="assets/css/leftmenu.css" role="assets/js/leftmenu.js">Left Menu</a></li>
    <li><a href="#" rel="assets/css/rightmenu.css" role="assets/js/rightmenu.js">Right Menu</a></li>
    <li><a href="#" rel="assets/css/topmenu.css" role="assets/js/topmenu.js">Top Menu</a></li>
    <li><a href="#" rel="assets/css/topmenufixed.css" role="assets/js/topmenufixed.js">Top Menu Fixed</a></li>
</ul>

<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">

    $(window).load(function () {
    $('.sidenav ul > li').click(function (ev) {
        $(this).find('>ul').fadeToggle();
        ev.stopPropagation();
    });
    $('.sidenav ul > li a.back').click(function (ev) {
        $(this).parent().parent().fadeOut();
        ev.stopPropagation();
    });
});
$(window).on("load resize", function () {
  if ($(window).width() <= 768) {
      $(document).on("swiperight", function () {
          $(".sidenav").addClass('sidenavhover');
          $(".overlay").fadeIn();
          $(".sidenav li.user").addClass('usershow');
      });
      $(document).on("swipeleft", function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
  }
  if ($(window).width() >= 769) {
      $(".sidenav").mouseover(function () {
          $(".sidenav").addClass('sidenavhover');
          $(".sidenav li.user").addClass('usershow');
          $(".overlay").fadeIn();
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").slideUp(100);
          $(".sidenav li.user").removeClass('usershow');
          $(".overlay").fadeOut();
      });
  }  if ($(window).height() < 458) {
      $(".sidenav ul > li.logout").css('position', 'relative');
      $(".sidenav ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 458) {
      $(".sidenav ul > li.logout").css('position', 'absolute');
      $(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
  if ($(window).height() < 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
});

    

  • 

  • 

  • 

  •
它会更改这些内容：

$("#navorin li a").click(function() { 
    $("link.nav").attr("href",$(this).attr('rel'));
    $("script.nav").attr("src",$(this).attr('role'));
});

<ul id="navorin">
    <li><a href="#" rel="assets/css/leftmenu.css" role="assets/js/leftmenu.js">Left Menu</a></li>
    <li><a href="#" rel="assets/css/rightmenu.css" role="assets/js/rightmenu.js">Right Menu</a></li>
    <li><a href="#" rel="assets/css/topmenu.css" role="assets/js/topmenu.js">Top Menu</a></li>
    <li><a href="#" rel="assets/css/topmenufixed.css" role="assets/js/topmenufixed.js">Top Menu Fixed</a></li>
</ul>

<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">

    $(window).load(function () {
    $('.sidenav ul > li').click(function (ev) {
        $(this).find('>ul').fadeToggle();
        ev.stopPropagation();
    });
    $('.sidenav ul > li a.back').click(function (ev) {
        $(this).parent().parent().fadeOut();
        ev.stopPropagation();
    });
});
$(window).on("load resize", function () {
  if ($(window).width() <= 768) {
      $(document).on("swiperight", function () {
          $(".sidenav").addClass('sidenavhover');
          $(".overlay").fadeIn();
          $(".sidenav li.user").addClass('usershow');
      });
      $(document).on("swipeleft", function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
  }
  if ($(window).width() >= 769) {
      $(".sidenav").mouseover(function () {
          $(".sidenav").addClass('sidenavhover');
          $(".sidenav li.user").addClass('usershow');
          $(".overlay").fadeIn();
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").slideUp(100);
          $(".sidenav li.user").removeClass('usershow');
          $(".overlay").fadeOut();
      });
  }  if ($(window).height() < 458) {
      $(".sidenav ul > li.logout").css('position', 'relative');
      $(".sidenav ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 458) {
      $(".sidenav ul > li.logout").css('position', 'absolute');
      $(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
  if ($(window).height() < 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
});
如果有帮助的话，我的菜单脚本大致如下所示：

$("#navorin li a").click(function() { 
    $("link.nav").attr("href",$(this).attr('rel'));
    $("script.nav").attr("src",$(this).attr('role'));
});

<ul id="navorin">
    <li><a href="#" rel="assets/css/leftmenu.css" role="assets/js/leftmenu.js">Left Menu</a></li>
    <li><a href="#" rel="assets/css/rightmenu.css" role="assets/js/rightmenu.js">Right Menu</a></li>
    <li><a href="#" rel="assets/css/topmenu.css" role="assets/js/topmenu.js">Top Menu</a></li>
    <li><a href="#" rel="assets/css/topmenufixed.css" role="assets/js/topmenufixed.js">Top Menu Fixed</a></li>
</ul>

<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">

    $(window).load(function () {
    $('.sidenav ul > li').click(function (ev) {
        $(this).find('>ul').fadeToggle();
        ev.stopPropagation();
    });
    $('.sidenav ul > li a.back').click(function (ev) {
        $(this).parent().parent().fadeOut();
        ev.stopPropagation();
    });
});
$(window).on("load resize", function () {
  if ($(window).width() <= 768) {
      $(document).on("swiperight", function () {
          $(".sidenav").addClass('sidenavhover');
          $(".overlay").fadeIn();
          $(".sidenav li.user").addClass('usershow');
      });
      $(document).on("swipeleft", function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").hide();
          $(".overlay").fadeOut();
          $(".sidenav li.user").removeClass('usershow');
      });
  }
  if ($(window).width() >= 769) {
      $(".sidenav").mouseover(function () {
          $(".sidenav").addClass('sidenavhover');
          $(".sidenav li.user").addClass('usershow');
          $(".overlay").fadeIn();
      });
      $(".overlay").click(function () {
          $(".sidenav").removeClass('sidenavhover');
          $(".sidenav ul > li ul").slideUp(100);
          $(".sidenav li.user").removeClass('usershow');
          $(".overlay").fadeOut();
      });
  }  if ($(window).height() < 458) {
      $(".sidenav ul > li.logout").css('position', 'relative');
      $(".sidenav ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 458) {
      $(".sidenav ul > li.logout").css('position', 'absolute');
      $(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
  if ($(window).height() < 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
  }
  if ($(window).height() > 588) {
      $(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
      $(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
  }
});

$（窗口）。加载（函数（）{
$（'.sidenav ul>li'）。单击（函数（ev）{
$（this.find（'>ul'）.fadeToggle（）；
ev.stopPropagation（）；
});
$（'.sidenav ul>li a.back'）。单击（函数（ev）{
$（this.parent（）.parent（）.fadeOut（）；
ev.stopPropagation（）；
});
});
$（窗口）。打开（“加载调整大小”，函数（）{
如果（$（窗口）.width（）=769）{
$（“.sidenav”）.mouseover（函数（）{
$（“.sidenav”）.addClass（'sidenavhover'）；
$（“.sidenav li.user”）.addClass（'usershow'）；
$（“.overlay”）.fadeIn（）；
});
$（“.overlay”）。单击（函数（）{
$（“.sidenav”）.removeClass（'sidenavhover'）；
美元（“.sidenav ul>li ul”）.slideUp（100）；
$（.sidenav li.user”）.removeClass（'usershow'）；
$（“.overlay”）.fadeOut（）；
});
}如果（$（窗口）.height（）<458）{
$（.sidenav ul>li.logout”）.css（'position'，'relative'）；
$（“.sidenav ul>li.logout”）.css（'border-top'，'0'）；
}
如果（$（窗口）.height（）>458）{
$（“.sidenav ul>li.logout”）.css（'position'，'absolute'）；
$（.sidenav ul>li.logout”）.css（'border-top'，'1px solid'eeeeee'）；
}
如果（$（窗口）.height（）<588）{
$（.sidenav.sidenavhover ul>li.logout”）.css（'position'，'relative'）；
$（.sidenav.sidenavhover ul>li.logout”）.css（'border-top'，'0'）；
}
如果（$（窗口）.height（）>588）{
$（.sidenav.sidenavhover ul>li.logout”）.css（'position'，'absolute'）；
$（.sidenav.sidenavhover ul>li.logout”）.css（'border-top'，'1px solid#eeeeee'）；
}
});
如果有人能帮我把它做好，那就太棒了

谢谢，
Alfred

更改
的src不会像您预期的那样“重新加载”脚本。你需要删除脚本并添加一个新的（谷歌它）。。。。这样做不会撤消上一个脚本的效果；事件处理程序、全局对象等仍将存在。基本上，这不是做事的方法。最好的方法是为当前使用的样式设置一个全局变量，然后在脚本中执行这些函数。另一个想法是使用全局类创建样式变体，并在切换样式时简单地将类添加到主体中。有没有办法停止脚本的执行？对不起，我没有经验