Question

这是我的下拉菜单，其中包含主题名称列表。

boot.html

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Switch Theme<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>  <a>Dark</a>     </li>
                    <li>  <a>Apple</a>    </li>
                    <li>  <a>Blue</a>     </li>
                    <li>  <a>Pearl</a>    </li>
                    <li>  <a>Box</a>      </li>
                    <li>  <a>Pane</a>     </li>
                    <li>  <a>glue</a>     </li>
                    <li>  <a>Gun</a>      </li>
                    <li>  <a>Interim</a>  </li>
                    <li>  <a>Squash</a>   </li>
                </ul>
            </li>

如果我点击它们，我需要链接标记指向不同的css文件。我找到了解决方案，使得链接标记在一般单击任何列表项时指向单个css路径。但我希望不同的列表能够唯一地指出不同的css路径。

我有不同主题的链接标记路径，如文件

cssa/jquery-ui-1.10.4.custom.min.css
cssb/jquery-ui-1.10.4.custom.min.css
cssc/jquery-ui-1.10.4.custom.min.css
cssd/jquery-ui-1.10.4.custom.min.css
csse/jquery-ui-1.10.4.custom.min.css
cssf/jquery-ui-1.10.4.custom.min.css

这是jquery解决方案，它指向单击任何列表项的路径：

 <script>
 var link = $('link.me');

$(window).load(function () {
    var link = $('link.me');
     var list= $('ul.dropdown-menu li');
       list.click(function (e) {
        e.preventDefault();
        link.attr('href', 'cssh/jquery-ui-1.10.4.custom.min.css')
    });

   });
</script>

我必须实施两件事

1：我希望每个列表指向不同的路径。我该如何实现呢。

2：刷新后，页面必须坚持选定的主题。

Answer 1

试试这种方式

HTML

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Switch Theme<b class="caret"></b></a>

    <ul class="dropdown-menu">
        <li> <a data-theme="cssa/jquery-ui-1.10.4.custom.min.css">Dark</a> 
        </li>
        <li> <a data-theme="csse/jquery-ui-1.10.4.custom.min.css">Apple</a> 
        </li>
        <li> <a data-theme="cssb/jquery-ui-1.10.4.custom.min.css">Blue</a> 
        </li>
        <li> <a data-theme="cssc/jquery-ui-1.10.4.custom.min.css">Pearl</a> 
        </li>
        <li> <a data-theme="cssd/jquery-ui-1.10.4.custom.min.css">Box</a> 
        </li>
    </ul>
</li>

脚本

$(window).load(function () {
        var link = $('link.me');
       $('ul.dropdown-menu li').click(function (e) {
        e.preventDefault();
        var theme = $(this).find('a').data('theme');
        var store = $(this).index();
        localStorage.setItem("colors", store);
        link.attr('href', theme)
       });
      var retrievedObject = localStorage.getItem('colors');
      if (retrievedObject != null) {
        $('ul.dropdown-menu li:eq(' + retrievedObject + ')').trigger('click');
      } else {
        $('ul.dropdown-menu li:eq(0)').click();
      }
  });

DEMO

如何在jquery中切换主题

1 个答案: