Exercice 4

by gol ngaz²

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<ul class="menu buttons_vertical">
  <li class="active town">
    <a href="#" class="button orange big">
    <span>Paris</span>
    </a>
    <span class="corner"></span>
  </li>
  <li class="flights">
    <a href="#" class="button big">
    <span>
    <span class="icon type flight fleft mr05"></span>
    <span class="fleft text">
    <b>Vols</b><br />
    <i class="grey_dark">à partir de 345€</i>
    </span>
    </span>
    </a>
    <span class="corner"></span>
  </li>
  <li class="stays">
    <a href="#" class="button big">
    <span>
    <span class="icon type stay fleft mr05"></span>
    <span class="fleft text">
    <b>Séjours</b><br />
    <i class="grey_dark">à partir de 345€</i>
    </span>
    </span>
    </a>
    <span class="corner"></span>
  </li>
  <li class="hotels">
    <a href="#" class="button big">
    <span>
    <span class="icon type hotel fleft mr05"></span>
    <span class="fleft text">
    <b>Hôtels</b><br />
    <i class="grey_dark">à partir de 345€</i>
    </span>
    </span>
    </a>
    <span class="corner"></span>
  </li>
  <li class="photos">
    <a href="#" class="button big">
    <span>
    <span class="icon type photos fleft mr05"></span>
    <span class="fleft text">
    <b>Photos</b><br />
    <i class="grey_dark">à partir de 345€</i>
    </span>
    </span>
    </a>
    <span class="corner"></span>
  </li>
  <li class="tripadvisor">
    <a href="#" class="button big">
    <span>
    <span class="icon type tripadvisor fleft mr05"></span>
    <span class="fleft text">
    <b>TripAdvisor</b><br />
    <i class="grey_dark">avis voyageurs</i>
    </span>
    </span>
    </a>
    <span class="corner"></span>
  </li>
</ul>

CSS

body { background:url('http://subtlepatterns.com/patterns/gridme.png'); padding:5em; font-family:'Helvetica Neue'; font-size:24px; }
* { margin:0; padding:0; list-style:none; text-decoration:none; }

/* =Buttons
----------------------------------------------- */
.button { background:#fff url('../img/buttons.png') repeat-x; display:inline-block; *display:inline;/* IE7 Hack */ border:solid 1px #cbcbcb; border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.1); -webkit-box-shadow:0 1px 1px rgba(0,0,0,.1); line-height:1.5; }
.button > span { padding:5px 15px; display:inline-block; border-radius:2px; border-top:solid 1px rgba(255,255,255,.7); color:#717171; font-weight:bold; text-shadow:0 -1px 0 #fff; font-size:12px; }
.button:hover { background-color:#fafafa; }

/* Colors */
.button.white { background-image:url('../images/buttons/white.png'); }
.button.orange { background-color:#db5406; background-position:0 -141px; border-color:#ba4705; }
.button.orange > span { color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,0.3); border-color:rgba(255,255,255,.2); }
a.button.orange:hover { background-position:0 -180px; }
a.button.orange:active { background-position:0 -220px; }
.button.orange.big, 
.button.orange.big:hover,
.button.orange.big:active { background-position:0 -256px; }
.button.red { background-color:red; border-color:#ce080b; }
.button.red > span { text-shadow:0 -1px 0 rgba(0,0,0,0.3); border-color:rgba(255,255,255,.2); color:#fff; }

/* Sizes */
.button.small span { padding:1px 6px; font-weight:normal; }
.button.mini { line-height:0.6; border-radius:10px; }
.button.mini > span { padding:0 4px 2px; font-weight:normal; line-height:1; border-radius:9px; font-size:10px; }
.button.medium > span { padding:3px 12px; }
.button.big { background-position:0 -30px; }

/* Group vertical */
ul.buttons_vertical li { margin:0 0 5px 10px; position:relative; }
ul.buttons_vertical li:hover { margin-left:7px; -webkit-transition:margin 0.1s; -moz-transition:margin .1s; -o-transition:margin .1s;...

JavaScript

$("li").click(function(){
  $("li").each(function(){
    $(this).removeClass("active");
    $(this).children("a").removeClass("orange");

  });
  $(this).addClass("active");
  $(this).children("a").addClass("orange");
});