Jquery “如何切换”；“控制组”；背景色_Jquery_Css_Jquery Mobile

Jquery “如何切换”；“控制组”；背景色

jquery css jquery-mobile

Jquery “如何切换”；“控制组”；背景色,jquery,css,jquery-mobile,Jquery,Css,Jquery Mobile,我想更改“控制组”中每个按钮的背景色。如果没有按下按钮，我知道如何更改背景颜色：（这是css的第一个部分！）但如果按钮处于活动状态，则以下代码无法更改颜色： .ui-page-theme-a .ui-btn.ui-btn-active{ background-color: #123456; } 这是我完整的html代码： <html> <head> <meta name=viewport content="user-scalable=no,wi

我想更改“控制组”中每个按钮的背景色。如果没有按下按钮，我知道如何更改背景颜色：（这是css的第一个部分！）

但如果按钮处于活动状态，则以下代码无法更改颜色：

.ui-page-theme-a .ui-btn.ui-btn-active{
    background-color: #123456;
}

这是我完整的html代码：

<html>

<head>
    <meta name=viewport content="user-scalable=no,width=device-width" />
    <link href="css/colorpicker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="js/colorpicker.js"></script>
    <script>
        onStart();
    </script>
</head>

<body>
    <div class="container">
        <div id="preview" class="preview"></div>
        <p id="output"></p>

        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Horizontal controlgroup, checkbox:</legend>
            <input type="checkbox" id="modul1">
            <label for="modul1">Modul 1</label>
            <input type="checkbox" id="modul2">
            <label for="modul2">Modul 2</label>
            <input type="checkbox" id="modul3">
            <label for="modul3">Modul 3</label>
            <input type="checkbox" id="modul4">
            <label for="modul4">Modul 4</label>
            <input type="checkbox" id="modul5">
            <label for="modul5">Modul 5</label>
            <input type="checkbox" id="modul6">
            <label for="modul6">Modul 6</label>
            <input type="checkbox" id="modul7">
            <label for="modul7">Modul 7</label>
            <input type="checkbox" id="modul8">
            <label for="modul8">Modul 8</label>
        </fieldset>

        <div class="colorpicker" style="display:none">
            <canvas id="picker" var="2" width="300" height="300"></canvas>
        </div>
    </div>
</body>

</html>


onStart（）；

水平控制组，复选框：
模1
模2
模块3
模4
模5
模块6
模块7
模8

这里有一个实时代码供您使用：

我还没有检查您的代码，但我会先检查：

.ui-page-theme-a.ui-btn.ui-btn-active

-active不是用于活动行为的css选择器。考虑<代码> .Ui-PAGE主题-Au.btn.uibtn:Active

Read，你的修复非常简单，有两种可能的方法来修复这个问题，一个（第二个选项）可能更合乎需要。这里真正的问题是连接优先级。此样式表：

“http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css“

是凌驾于你的风格之上的东西。也许你有你自己的样式表链接在头部，然后这一个在它下面

简单快捷的方法是添加
！重要信息
，位于css属性的末尾。
这可能有点令人讨厌，通常最好避免使用！尽可能重要

更理想的方法是确保在您自己的样式表之前链接上述样式表。就像下面

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <link rel="stylesheet" href="mystyles.css" />

您的CSS与HTML输出不匹配。你的HTML中没有一个类是“ui btn”或“ui btn active”。实际上这些类是存在的，我认为jquery会生成它们。。。就像我说的第一段代码正在运行明白了…-将来，您能否使用页面源中的复制粘贴编辑HTML输入？从页面源代码复制将包括任何jquery生成的类。为您添加了完整的html，据我所知，jquery在加载页面时动态增强了html代码，因此我无法向您显示更多代码。Hmmm。。。最后一个请求-我是否可以访问该站点的实时链接，以便使用chrome开发工具访问该站点？很难看出没有它会发生什么。为什么会是。ui btn。ui btn？？？这两个类相互对接的事实表明它们是应用于同一元素的两个类。因此，ui btn active是一个单独的类，而不是伪选择器的输入错误。我已经尝试过了，它在按住鼠标按钮时起作用。但它不是按钮“激活”状态的匹配css语句。我看不到使用的类。没有提供css进行检查。我能提供指导的唯一一件事是，他可能有打字错误。但是如果你已经尝试过了，但它没有修复它，那么就提供css或小提琴，这样我们就可以有更好的基础来使用。是的-：active并不完全像一些人最初认为它是用来做的那样。嗯，实际上它是专门工作的。如果他使用的是像Bootstrap这样的框架，那么：active选择器会自动为btn提供一个active responseDev tools就是这样的救世主。通过检查元素，您可以很快看到jquery mobile CSS文件应用的默认样式覆盖了您自己的自定义样式。一旦你知道了真正的问题，就可以很容易地诊断出如何解决
background-color: orange !important;

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <link rel="stylesheet" href="mystyles.css" />