Jquery 切换类别和第一页边距_Jquery_Html_Css

Jquery 切换类别和第一页边距

jquery html css

Jquery 切换类别和第一页边距,jquery,html,css,Jquery,Html,Css,首先，我英语说得不是很好第二：我的问题是关于“切换类” 我不熟悉jquery和JavaScript，下面是我的代码： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.humburger'

首先，我英语说得不是很好第二：我的问题是关于“切换类”

我不熟悉jquery和JavaScript，下面是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
   $('.humburger').click(function(){
       $('#sidbar').toggleClass('side-lg-tog');
       $('#contenu').toggleClass('contenu-lg-tog');
   });
});
</script>

<style> 
   body {
       margin:0; padding:0;
   }

   #entete {
       height:50px;
       background-color:#197aac;
       position:relative;
   }

   .humburger {
       position:absolute;
       top:17px;
       left:15px;
       cursor:pointer;
   }

   .humburger span {
       background-color:#fff;
       display:block;
       height:2px;
       width:20px;
       margin-bottom:3px;
   }

   #sidbar {
       width:300px;
       height:100%;
       background-color:#e7e7e7; 
       border-right:1px solid #ccc;
       position:absolute;
       top:50px;
       left:0;
       transition:transform .3s ease-in-out;  
   }

   .side-lg-tog{transform:translate(-240px, 0);}
   .contenu-lg-tog {margin-left:60px;!important}

   #contenu {
       background-color:#eff8fd;   
       height:100%;
       margin-left:300px;
       padding:15px 30px;
       transition:margin-left .3s ease-in-out;
   }

   .pad-contenu {
       border:1px solid #ccc;
       min-height:300px;
       background-color:#fff;
   }

   @media (max-width:767px){
    #sidbar{transform:translate(-300px, 0);color:red;}
    #contenu {margin-left:0;}
   }   
</style>
</head>
<body>
    <div id="entete">
       <div class="humburger">
          <span></span>
          <span></span>
          <span></span>
       </div>
    </div>
    <div id="sidbar">test</div>
    <div id="toggle-btn"></div>
    <div id="contenu">
        <div class="pad-contenu">
        </div>
    </div>

</body>
</html>


$（文档）.ready（函数（）{
$（'.humburger'）。单击（函数（）{
$（'sidbar'）.toggleClass（'side-lg-tog'）；
$（'contenu'）.toggleClass（'contenu-lg-tog'）；
});
});
身体{
边距：0；填充：0；
}
#恩特{
高度：50px；
背景色：197aac；
位置：相对位置；
}
亨伯格先生{
位置：绝对位置；
顶部：17px；
左：15px；
光标：指针；
}
亨伯格先生{
背景色：#fff；
显示：块；
高度：2倍；
宽度：20px；
利润底部：3倍；
}
#西德巴{
宽度：300px；
身高：100%；
背景色：#e7e7e7；
右边框：1px实心#ccc；
位置：绝对位置；
顶部：50px；
左：0；
转换：转换。3秒轻松输入输出；
}
.side lg tog{transform:translate（-240px，0）；}
.contenu lg tog{左边距：60px；！重要}
#孔特努{
背景色：#eff8fd；
身高：100%；
左边距：300px；
填充：15px 30px；
过渡：左边距。3秒进退；
}
.pad contenu{
边框：1px实心#ccc；
最小高度：300px；
背景色：#fff；
}
@介质（最大宽度：767px）{
#sidbar{transform:translate（-300px，0）；颜色：红色；}
#内容{左边距：0；}
}   
测试

问题是，当我在汉堡中单击侧栏时，通过使用新的类side lg-tog

$（'sidbar'）。toggleClass（'side-lg-tog'）但内容保留第一个空白：300px我希望它是60px，
谢谢，对不起，我的英语，我的第二语言是法语
 我认为这可以通过
document.getElementsById("id")[0].setAttribute("class", "democlass");

[0]引用要按写入顺序更改的元素
也可以通过
element.style.CSS_Property = "Value";

元素是变量
请参阅：
您在语句中犯了错误。contenu lg tog{margin left:60px；！important}

你需要在“！important”后面加分号。只要写下：
.contenu-lg-tog {
   margin-left:60px !important;
}

getElementsById
不能是数组，因为ID
的性质，并且在中没有getElementsById
javascript@Banzay我知道它不是数组，我是说它使用起来就像数组一样