Css 通过单击按钮更改有响应和无响应的站点

我有一个具有bootstrap 3.1.1的响应站点。我想在用户单击“桌面视图”按钮时显示桌面视图

我已经用它作为支持，但这没有帮助

它没有帮助，原因有二：-

我在布局文件中添加的CSS如下所示：

在整个应用程序中，我使用了

隐藏的xs

、

隐藏的sm

、

隐藏的md

和

隐藏的lg

类

如何通过单击按钮创建站点桌面视图和移动视图

编辑

我同时使用两个样式表。“mobile.css”和“desktop.css”的样式表（用于不需要专门为手机设置样式的项目）

---

因此，交换两个样式表都不起作用。

一种方法是：单击按钮时使用Jquery更改视口的元标记：

$('#buttonId').click(function (){
        $('meta[name=viewport]').attr('content', "width=1024");
});

---

我只是想到了一些简单的事情。对于所有具有隐藏xs类的div：为每个div添加一个特殊类（

had hidden xs

），为

hidden lg

add

had hidden lg

），依此类推

//when the button is clicked, every class is removed
$('#buttonId').click(function (){
   //removes all the classes  
   $('.hidden-xs, .hidden-sm, .hidden-md, .hidden-mg').removeClass('hidden-xs hidden-sm hidden-md  hidden-mg');
});

//when the button to go to mobile view is clicked: 
$('#backToMobile').click(function (){
   //add back your classes using the classes you created in the previous 2 steps
   $('.had-hidden-xs').addClass('hidden-xs');
   $('.had-hidden-sm').addClass('hidden-sm');
   $('.had-hidden-md').addClass('hidden-md');
   $('.had-hidden-lg').addClass('hidden-lg');
});

在编辑问题之前：看看你的样式表，你可能也有一个桌面样式，因为你有一个mobile.css。您可以使用jquery轻松地交换样式表

$('#buttonId').click(function (){
   $('link[href="styles/mobile.css"]').attr('href','desktop.css');
});

$('#buttonId').click(function (){
   $('link[href="style/desktop.css"]').attr('href','mobile.css');
});

---

请检查编辑。在这些情况下，交换不起作用。即使交换能起作用，我也无法解决第二期（隐藏类）的问题。请检查我的编辑@user3328402。我认为第二种选择同时处理这两个问题。它的行为与您为帮助解决问题而检查的问题一样。我尝试了该问题的方法，但这对第二期隐藏类没有帮助，这就是我发布该问题的原因。@user3328402我添加了如何删除所有这些类。您可以组合解决方案，一切都将正常工作。