twitter-bootstrap – 如何在单击主题的下拉菜单后动态更改主题

发布时间：2020-12-18 00:11:21 所属栏目：安全来源：网络整理

导读：我正在使用bootstrap作为我正在开发的网站的界面。我也打算将bootswatch主题整合到我的网站。我创建了一个包含bootswatch不同主题的下拉菜单。我的问题是当我点击下拉菜单中的一个主题时如何切换主题？解决方法小提琴： http://jsfiddle.net/82AsF/(点击导

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

解决方法

小提琴： http://jsfiddle.net/82AsF/(点击导航栏中的主题下拉列表)为您的链接提供类主题链接和主题名称的数据主题值，如下所示：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!