样式切换器脚本

时间:2013-11-08 18:43:42

标签: 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'));
});

HTML

<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');
  }
});

如果有人能帮助我让它工作那将是惊人的

谢谢, 阿尔弗雷德

0 个答案:

没有答案