jQuery addClass example

Change class name on click in jQuery

by kunshop

HTML

<link rel="stylesheet" href="https://framework7.io/packages/core/css/framework7.bundle.min.css">
<script src="https://framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<div class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="ios-only">Back</span>
                </a>
            </div>
            <div class="title">Smart select</div>
        </div>
    </div>
    <div class="page-content">
        <p><a class="link popup-open" href="#" data-popup=".popup-services">Open Popup</a></p>
    </div>
    <div class="popup popup-services">
        <p><a class="link popup-close" href="#">Close popup</a></p>
        <div class="list">
          <ul>
              <li>
                  <a class="item-link smart-select smart-select-init">
                    <select name="fruits">
                      <option value="apple" selected>Apple</option>
                      <option value="pineapple">Pineapple</option>
                      <option value="pear">Pear</option>
                      <option value="orange">Orange</option>
                      <option value="melon">Melon</option>
                      <option value="peach">Peach</option>
                      <option value="banana">Banana</option>
                    </select>
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title">Fruit</div>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- Open In Popup + Searchbar + Multiple -->
                <li>
                  <a class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search car">
                    <select name="car" multiple>
  ...

JavaScript

var app = new Framework7();