单击主题下拉菜单后如何动态更改主题

时间：2013-10-05 00:37:25

标签： twitter-bootstrap bootswatch

我正在使用bootstrap作为我正在开发的网站的界面。我还计划将bootswatch主题集成到我的网站。我创建了一个包含bootswatch不同主题的下拉菜单。我的问题是当我点击下拉菜单中的一个主题时如何切换主题？

6 个答案:

答案 0 :(得分：58)

小提琴： http://jsfiddle.net/82AsF/（点击导航栏中的主题下拉列表）
为您的链接提供课程theme-link和data-theme的值主题名称如下：

<a href="#" data-theme="amelia" class="theme-link">Amelia</a>

然后，在全局变量中定义主题，如下所示：

var themes = {
    "default": "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css",
    "amelia" : "//bootswatch.com/amelia/bootstrap.min.css",
    "cerulean" : "//bootswatch.com/cerulean/bootstrap.min.css",
    "cosmo" : "//bootswatch.com/cosmo/bootstrap.min.css",
    "cyborg" : "//bootswatch.com/cyborg/bootstrap.min.css",
    "flatly" : "//bootswatch.com/flatly/bootstrap.min.css",
    "journal" : "//bootswatch.com/journal/bootstrap.min.css",
    "readable" : "//bootswatch.com/readable/bootstrap.min.css",
    "simplex" : "//bootswatch.com/simplex/bootstrap.min.css",
    "slate" : "//bootswatch.com/slate/bootstrap.min.css",
    "spacelab" : "//bootswatch.com/spacelab/bootstrap.min.css",
    "united" : "//bootswatch.com/united/bootstrap.min.css"
}

（请在您执行此操作时在您自己的服务器上托管这些bootswatch css文件 - 我只是热链接，因为我手边没有服务器）
然后，使用以下jQuery代码：

$(function(){
   var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
    themesheet.appendTo('head');
    $('.theme-link').click(function(){
       var themeurl = themes[$(this).attr('data-theme')]; 
        themesheet.attr('href',themeurl);
    });
});

答案 1 :(得分：4)

上述解决方案的主要问题如果页面刷新，主题就消失了。 我发现这篇文章对于浏览器中的持久主题非常有帮助，因为它保存了浏览器存储中的设置。

我希望它可以帮助你

http://wdtz.org/bootswatch-theme-selector.html

答案 2 :(得分：1)

凯文提供的解决方案很棒。我花了一些时间试图弄清楚如何使它与本地bootswatch库一起工作。

典型的href属性值：

"~/lib/bootstrap/dist/css/bootstrap.min.css"

但在这种情况下：

        var themes = {

        "default": "lib/bootstrap/dist/css/bootstrap.min.css",
        "amelia": "lib/bootswatch/amelia/bootstrap.min.css",
        "cerulean": "lib/bootswatch/cerulean/bootstrap.min.css",
        "cosmo": "lib/bootswatch/cosmo/bootstrap.min.css",
        "cyborg": "lib/bootswatch/cyborg/bootstrap.min.css",
        "flatly": "lib/bootswatch/flatly/bootstrap.min.css",
        "journal": "lib/bootswatch/journal/bootstrap.min.css",
        "readable": "lib/bootswatch/readable/bootstrap.min.css",
        "simplex": "lib/bootswatch/simplex/bootstrap.min.css",
        "slate": "lib/bootswatch/slate/bootstrap.min.css",
        "spacelab": "lib/bootswatch/spacelab/bootstrap.min.css",
        "united": "lib/bootswatch/united/bootstrap.min.css"
    }

答案 3 :(得分：1)

我基于@ KevinPei的答案，使用jQuery，Bootstrap和Bootswatch自动下拉列表，向导航栏添加一个下拉列表，自动将主题更新为所选值。

小提琴： https://jsfiddle.net/davfive/uwseLLzf/show

该代码在实践中非常有用。但是，在jsfiddle中，有两种奇怪的行为：

  1. 有时下拉列表会延伸到整个屏幕
  2. 下拉列表的鼠标悬停/悬停颜色未显示在jsfiddle中。
    3. <html lang="en">
<head>
    <!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <a class="navbar-brand">Bootswatch Theme Changer</a>
    <div class="nav navbar-nav pull-right">
        <li id="theme-button" class="dropdown">
          <a href="#"  class="dropdown-toggle" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
          <ul class="dropdown-menu ">
            <li><a href="#" name="current">Cerulean</a></li>
            <li class="divider"></li>
            <li><a href="#" name="cerulean">Cerulean</a></li>
            <li><a href="#" name="cosmo">Cosmo</a></li>
            <li><a href="#" name="cyborg">Cyborg</a></li>
            <li><a href="#" name="darkly">Darkly</a></li>
            <li><a href="#" name="flatly">Flatly</a></li>
            <li><a href="#" name="journal">Journal</a></li>
            <li><a href="#" name="lumen">Lumen</a></li>
            <li><a href="#" name="paper">Paper</a></li>
            <li><a href="#" name="readable">Readable</a></li>
            <li><a href="#" name="sandstone">Sandstone</a></li>
            <li><a href="#" name="simplex">Simplex</a></li>
            <li><a href="#" name="slate">Slate</a></li>
            <li><a href="#" name="solar">Solar</a></li>
            <li><a href="#" name="spacelab">Spacelab</a></li>
            <li><a href="#" name="superhero">Superhero</a></li>
            <li><a href="#" name="united">United</a></li>
            <li><a href="#" name="yeti">Yeti</a></li>
          </ul>
        </li>
    </div>
  </div>
</div>
<script>
jQuery(function($) {
  $('#theme-button ul a').click(function() {
    if ($(this).attr('name') != 'current') {
      var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
      var urlend = '/bootstrap.min.css'
      var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
      var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);

      $('#theme-button ul a[name="current"]').text($(this).text());
    }
  });
});
</script>
</body>
</html>

答案 4 :(得分：0)

你可以尝试这样的事情

HTML：

<link href="/Themes/DefaultClean/Content/css/styles.css" id="theme-sheet" rel="stylesheet" type="text/css" />

的javascript：

function setTheme(themeName) {
    $('#theme-sheet').attr({ href: "https://bootswatch.com/slate/bootstrap.min.css" });;
}

在setTheme函数中，将从所需的源（如下拉列表或按钮）调用。

答案 5 :(得分：0)

感谢@davfive和他的复制/粘贴一个文件示例。
这是他的示例升级到bootswatch 4.5和jQuery 3.5：

<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/flatly/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="index.html"><img src="images/logos/Logo.png" alt="logo">MyWebSite Name </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">home<span class="sr-only">(current)</span></a>
                </li>
                <li id="theme-button" class="dropdown">
                    <a href="#"  class="dropdown-toggle nav-link" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
                    <ul class="dropdown-menu ">
                        <li><a href="#" name="current">Flatly</a></li>
                        <li class="divider"></li>
                        <li><a href="#" name="flatly">Flatly</a></li>
                        <li><a href="#" name="superhero">Superhero</a></li>
                        <li><a href="#" name="united">United</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
<script>
jQuery(function($) {
  $('#theme-button ul a').click(function() {
    if ($(this).attr('name') != 'current') {
      var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/4.5.0/'
      var urlend = '/bootstrap.min.css'
      var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
      var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);

      $('#theme-button ul a[name="current"]').text($(this).text());
    }
  });
});
</script>
</body>
</html>

我还添加了 home 菜单链接，并删除了许多主题。当然，您可以添加/更改一些。

相关问题
最新问题