时间戳

首页 > 解决方案 > jquery覆盖我的css颜色

jquery - jquery覆盖我的css颜色

问题描述

我做了一个菜单，它工作完美，直到我添加 jquery 链接如下

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

添加这些链接时，我的菜单按钮颜色将变为灰色而不是黑色（在添加这些链接之前）因为我需要在 Jquery 中使用移动“swipeleft”，所以我无法删除这些链接，对我的问题有任何想法吗？谢谢求助！！

以下是我的代码，它的菜单按钮颜色是黑色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
*{box-sizing: border-box}
body{
font-family:"Microsoft JhengHei",Georgia,Serif;
}
/* Style the tab content */
.tabcontent {
/* float: right;*/
padding: 0px 12px;
/* border: 1px solid #111;*/
text-align:center;
width: 100%;
border-left: none;
/* height: 300px;*/
}
.sidenav {
height: 100%;
width:0;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
 }
.sidenav button  {  /*set the text in button*/  
text-decoration: none;
border: 0px;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a  {  /*set the text in button*/
padding: 8px 8px 8px 32px;
text-decoration: none;
border: 0px;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav button:hover {
color: #f1f1f1;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn { /*x apprearance*/
position: absolute;
top: 0;
right: 25px;
font-size: 50px;
margin-left: 50px;
}
.button{
background-color: #111;
height: 10%;
width: 100%;
text-align: left;
font-weight: bold;
font-family:"Microsoft JhengHei",Georgia,Serif;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/*following is for my slide attribute*/
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {display: block;} 
to {margin: 0;}
}
@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav" >
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; 
 </a>
 <button class="button"class="tablinks" onclick="open_more(event, 
  'main_page')" id="defaultOpen">&nbsp首頁</button>

 </div>
 <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 
 </span>


  <script>
   // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();
   function openNav() {
   document.getElementById("mySidenav").style.width = "250px";
    }
   function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
   }
   </script>
   </body>
   </html>

标签： jquerycss

解决方案

例如，您可以使用!important由 JQuery 更改的属性例如：

background-color: red !important;

另一种可能性是你改变你的类名。

第一个更容易，第二个更好（因为!important不好）

推荐阅读