Listing 3.3: "selected" indicator.

Chapter 3/03.js

@@ -14,17 +14,29 @@ $(document).ready(function () {
   time.jQueryReady = (new Date()).getTime() - time.start;
   // console.log('jquery doc ready: the DOM is ready, dependencies may not yet be downloaded');
 
-  $('#switcher-large').on('click', function () {
-    $('body').addClass('large');
-    $('body').removeClass('narrow');
-  });
-  $('#switcher-default').on('click', function () {
-    $('body').removeClass('large');
-    $('body').removeClass('narrow');
-  });
-  $('#switcher-narrow').on('click', function () {
-    $('body').addClass('narrow');
-    $('body').removeClass('large');
-  });
+  $('#switcher-default')
+    .addClass('selected')
+    .on('click', function () {
+      $('body').removeClass('narrow');
+      $('body').removeClass('large');
+      $('#switcher button').removeClass('selected');
+      $(this).addClass('selected');
+    });
+
+  $('#switcher-large')
+    .on('click', function () {
+      $('body').addClass('large');
+      $('body').removeClass('narrow');
+      $('#switcher button').removeClass('selected');
+      $(this).addClass('selected');
+    });
+
+  $('#switcher-narrow')
+    .on('click', function () {
+      $('body').addClass('narrow');
+      $('body').removeClass('large');
+      $('#switcher button').removeClass('selected');
+      $(this).addClass('selected');
+    });
 
 });