Segmented Control in Javascript
<p>Does anybody know how implement a javascript for this segmented control? This segmented control acts like a group radio button.</p>

<pre><code>&lt;style&gt;
.buttonGroup
{
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;
}

.buttonGroup &gt; li
{
        display: block;
        -webkit-box-flex: 1;
        border: solid 1px #9a9a99;
        border-left: none;
        -webkit-border-radius: 0px;
        text-align: center;
        background-image:
                -webkit-gradient(linear, left top, left bottom,
                        from(#fbfbfb),
                        to(#bdbdbd));
        color: #6b6b6b;
        font-size: 16px;
        padding: 10px;
}

.buttonGroup &gt; li:first-child
{
        border-left: solid 1px #9a9a99;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
}

.buttonGroup &gt; li:last-child
{
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
}

.buttonGroup &gt; li.selected
{
        background-image:
                -webkit-gradient(linear, left top, left bottom,
                        from(#2a55b1),
                        to(#6297f2));
        color: #fff;
        border-color: #193a7f;
}
&lt;/style&gt;

&lt;ul class="buttonGroup"&gt;
  &lt;li class="selected"&gt;Navigate&lt;/li&gt;
  &lt;li&gt;Points&lt;/li&gt;
  &lt;li&gt;Lines&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Thanks in advance.</p>

<p>Here is full code with the answer from below. It is not working. Nothing is happening.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
    &lt;meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /&gt;
    &lt;title&gt;Segmental Control panel&lt;/title&gt;
    &lt;link rel="stylesheet" href="stylesheets/iphone.css" /&gt;

    &lt;script language="javascript"&gt; 
    &lt;!--
    var state = 'none';

    function showhide(layer_ref) {

    if (state == 'block') { 
    state = 'none'; 
    } 
    else { 
    state = 'block'; 
    } 
    if (document.getElementById &amp;&amp;!document.all) { 
    hza = document.getElementById(layer_ref); 
    hza.style.display = state; 
    } 
    } 
    //--&gt; 
    &lt;/script&gt;

    &lt;script type="text/javascript" charset="utf-8"&gt;
        window.onload = function() {
          setTimeout(function(){window.scrollTo(0, 1);}, 100);
        }
    &lt;/script&gt;

&lt;style&gt;
.buttonGroup
{
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;
}

.buttonGroup &gt; li
{
        display: block;
        -webkit-box-flex: 1;
        border: solid 1px #9a9a99;
        border-left: none;
        -webkit-border-radius: 0px;
        text-align: center;
        background-image:
                -webkit-gradient(linear, left top, left bottom,
                        from(#fbfbfb),
                        to(#bdbdbd));
        color: #6b6b6b;
        font-size: 16px;
        padding: 10px;
}

.buttonGroup &gt; li:first-child
{
        border-left: solid 1px #9a9a99;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
}

.buttonGroup &gt; li:last-child
{
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
}

.buttonGroup &gt; li.selected
{
        background-image:
                -webkit-gradient(linear, left top, left bottom,
                        from(#2a55b1),
                        to(#6297f2));
        color: #fff;
        border-color: #193a7f;
}
&lt;/style&gt;

&lt;script type="text/javascript" charset="utf-8"&gt;

      var ul = document.getElementsByTagName("UL");

      for(var i=0, j=ul.length; i&lt;j; i++) {
      if ( /\bbuttonGroup\b/.test(ul[i].className) ) {
          ul[i].onclick = segmentedController(ul[i]);
         }
      }

      function segmentedController(target) {
      return function(event) {
          var li = target.getElementsByTagName("LI");
          for (var i=0, j=li.length; i&lt;j; i++) {
              var _ = li[i];
              _.className = _.className.replace(/\bselected\b/, "");
              if (_ === event.target) _.className += " selected"; 
          }
        }
      }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="header"&gt;
        &lt;h1&gt;Segmented Control&lt;/h1&gt;
        &lt;a href="index.html" id="backButton"&gt;Index&lt;/a&gt;
    &lt;/div&gt;

    &lt;h1&gt;Examples&lt;/h1&gt;


  &lt;ul class="buttonGroup"&gt;
      &lt;li class="selected"&gt;Navigate&lt;/li&gt;
      &lt;li&gt;Points&lt;/li&gt;
      &lt;li&gt;Lines&lt;/li&gt;
      &lt;li&gt;Polygons&lt;/li&gt;
      &lt;li&gt;Modify&lt;/li&gt;
      &lt;li&gt;Drag&lt;/li&gt;
 &lt;/ul&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I need something like (below) in javascript. Code below is jquery mobile.</p>

<pre><code>&lt;form id="controls"&gt;
                    &lt;fieldset data-role="controlgroup" data-type="horizontal" 

    data-role="fieldcontain"&gt;
                            &lt;input id="nav" type="radio" name="controls" value="nav" checked="checked"&gt;
                            &lt;label for="nav"&gt;navigate&lt;/label&gt;
                            &lt;input id="point" type="radio" name="controls" value="point"&gt;
                            &lt;label for="point"&gt;point&lt;/label&gt;
                            &lt;input id="line" type="radio" name="controls" value="line"&gt;
                            &lt;label for="line"&gt;line&lt;/label&gt;
                            &lt;input id="poly" type="radio" name="controls" value="poly"&gt;
                            &lt;label for="poly"&gt;poly&lt;/label&gt;
                            &lt;input id="mod" type="radio" name="controls" value="mod"&gt;
                            &lt;label for="mod"&gt;modify&lt;/label&gt;
                            &lt;input id="drag" type="radio" name="controls" value="drag"&gt;
                            &lt;label for="drag"&gt;drag&lt;/label&gt;
                            &lt;input id="select" type="radio" name="controls" value="select"&gt;
                            &lt;label for="select"&gt;select&lt;/label&gt;
                        &lt;/fieldset&gt;
                    &lt;/form&gt;

$("#nav, #point, #line, #poly, #mod, #drag, #select").change(function(event) {
    deactivateControls();
    // jquery mobile bug regarding change makes us go through all inputs
    // https://github.com/jquery/jquery-mobile/issues/issue/1088
    var val = $("input:radio[name=controls]:checked").val();
    if (val !== "nav") {
        map.getControlsBy("id", val + "-control")[0].activate();
    }
});
</code></pre>
