jQuery toggleClass example

Toggle class name on click in jQuery

by aarkuo17

HTML

<div class="container">
  <div class="big-margin item"> 我是 margin 很大的 div </div>
  <div class="big-margin item"> 我是 margin 很大的 div </div>
  <div class="big-margin item"> 我是 margin 很大的 div </div>
  <div class="big-margin item"> 我的字離框線很近 </div>
  <div class="big-margin item"> 我的字離框線很近 </div>
  <div class="big-margin item"> 我的字離框線很近 </div>
  <div class="big-margin item"> 但是我離別人很遠 </div>
  <div class="big-margin item"> 但是我離別人很遠 </div>
  <div class="big-margin item"> 但是我離別人很遠 </div>
</div>

<div class="container">
  <div class="big-padding item"> 我是 padding 很大的 div </div>
  <div class="big-padding item"> 我是 padding 很大的 div </div>
  <div class="big-padding item"> 我是 padding 很大的 div </div>
  <div class="big-padding item"> 我的字離框線很遠 </div>
  <div class="big-padding item"> 我的字離框線很遠 </div>
  <div class="big-padding item"> 我的字離框線很遠 </div>
  <div class="big-padding item"> 但是我離別人很近 </div>
  <div class="big-padding item"> 但是我離別人很近 </div>
  <div class="big-padding item"> 但是我離別人很近 </div>
</div>

<div class="container">
  <div class="auto-margin-left item">
    margin 是離其他元素的距離
  </div>
</div>
<div class="container">
  <div class="auto-margin-left item">
    所以可以用 margin-left: auto 讓元素離左邊很遠很遠
  </div>
</div>
<div class="container">
  <div class="auto-margin-left item">
    也就是靠右
  </div>
</div>

<div class="container">
  <div class="auto-margin-center item">
    也可以用來讓元素離左右一樣遠，也就是置中
  </div>
</div>
<div class="container">
  <div class="auto-margin-center item">
    margin-left: auto; margin-right: auto
  </div>
</div>
<div class="container">
  <div class="auto-margin-center item">
    或是縮寫成 margin: 0 auto
  </div>
</div>

<div class="container">
  <div class="padding-center item">
    因為 padding 是距離邊框的距離，所以可以用來撐高元素
  </div>
</div>
<div class="container">
  <div class="padding-center item">
    利用上下一樣的 padding 可以做到垂直置中
  </div>
</div>
<div class="container">
  <div class="padding-center item">
    padding-top: 40px; padding-bottom: 40px;
  </div>
</div>
<div class="container">
 ...

CSS

.container {
  background-color: blue;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  border: solid;
  font-size: initial;
}

.big-margin {
  background-color: orange;
  margin: 30px;
}

.big-padding {
  background-color: yellow;
  padding: 30px;
}

.auto-margin-left {
  background-color: pink;
  margin-left: auto;
}

.auto-margin-center {
  background-color: pink;
  margin: 0 auto;
}

.padding-center {
  background-color: #F6F6D9;
  padding: 40px 0;
  width: 100%;
}

.margin-padding-center {
  margin: 0 auto;
  padding: 60px 0;
  border: none;
  color: yellow;
}