单击主题下拉菜单后如何动态更改主题 [英] How to dynamically change themes after clicking a drop down menu of themes

问题描述

我正在将引导程序用于我正在开发的网站的界面.我还计划将 bootswatch 主题集成到我的网站.我创建了一个包含 bootswatch 不同主题的下拉菜单.我的问题是当我点击下拉菜单中的主题之一时如何切换主题?

I'm using bootstrap for the interface of the website I'm developing. I am also planning to integrate the bootswatch themes to my site. I have created a dropdown menu containing the different themes of bootswatch. My problem is how can I switch themes when I click one of the themes in the dropdown menu?

推荐答案

Fiddle:http://jsfiddle.net/82AsF/(点击导航栏中的主题下拉菜单)
给你的链接一个类theme-link和一个data-theme 主题名称的值，如下所示:

Fiddle:http://jsfiddle.net/82AsF/ (click the themes dropdown in the navbar)
Give your links a class theme-link and a data-theme value of the theme name like so:

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

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

Then, define your themes in a global variable like so:

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 代码:

(please host these bootswatch css files on your own server when you do this - I'm only hotlinking because I don't have a server on hand)
Then, use the following jQuery code:

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

这篇关于单击主题下拉菜单后如何动态更改主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！