Как изменить содержимое с помощью jquery на двух разных вкладках

Question

В соответствии с приведенным ниже кодом вкладка дома по умолчанию показывает пустой. Содержимое отобразится ниже, когда мы перейдем на вкладку заказа продукта. Я написал этот код в Javascript. Но когда я попытался реализовать ту же логику в JQuery, она не работает. Кто-нибудь может помочь решить эту проблему?

Также еще одна справка. Когда я щелкнул вкладку, выбранная вкладка должна быть отмечена как цвет другого цвета, такой как синий.

function show_menu(elementId) { 
 
    document.getElementById("home").style.display = "none"; 
 
    document.getElementById("id2").style.display = "none"; 
 
    document.getElementById(elementId).style.display = "block"; 
 
} 
 

 
function show_left_menu(elementId) { 
 
    document.getElementById("quick_add").style.display = "none"; 
 
    document.getElementById("solution_builder").style.display = "none"; 
 
    document.getElementById("bulk_load").style.display = "none"; 
 
    document.getElementById("product_search").style.display = "none"; 
 
    document.getElementById("saved_cart").style.display = "none"; 
 
    document.getElementById("view_favorites").style.display = "none"; 
 
    document.getElementById(elementId).style.display = "block"; 
 
} 
 

 
//$(document).ready(function(){ 
 
// $("#home").click(function(){ 
 
//$("this").addClass("green"); 
 

 
//document.getElementById("home").style.display="none"; 
 
//document.getElementById("id2").style.display="none"; 
 
//document.getElementById(elementId).style.display="block"; 
 

 
//$("#home").css("display","none"); 
 
//$("#id2").css("display","none"); 
 
//$(this).css("display","block"); 
 

 
// }); 
 
//});

.wrapper { 
 
    margin: 0px auto 0px auto; 
 
    padding: 3px 0px 0px 0px; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    margin: 0px auto 0px auto; 
 
    padding: 0px 0px 0px 0px; 
 
    width: 900px; 
 
    height: 500px; 
 
    background-color: white; 
 
    border: 1px solid green; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.menu_container { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 900px; 
 
} 
 

 
.middle_container { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 900px; 
 
} 
 

 
.middle_container_left { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 300px; 
 
    height: 246px; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-top: 1px solid black; 
 
    float: left; 
 
} 
 

 
.middle_container_right { 
 
    margin: 0px 0px 0px 10px; 
 
    padding: 0px; 
 
    width: 580px; 
 
    height: 300px; 
 
    /*border: 1px solid black;*/ 
 
    float: left; 
 
} 
 

 
.menu_font { 
 
    margin: 0px 5px 0px 0px; 
 
    width: 100px; 
 
    height: 30px; 
 
    float: left; 
 
    cursor: hand; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
    font-weight: bold; 
 
    background-color: #8eaf64; 
 
    border-radius: 5px 5px 0 0; 
 
    color: white; 
 
} 
 

 
.menu_font:hover { 
 
    margin: 0px 5px 0px 0px; 
 
    width: 100px; 
 
    height: 30px; 
 
    float: left; 
 
    cursor: hand; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
    font-weight: bold; 
 
    color: white; 
 
    background-color: #64A70B !important; 
 
    border-radius: 5px 5px 0 0; 
 
} 
 

 
.onoffswitch { 
 
    position: relative; 
 
    width: 63px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 

 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 

 
.onoffswitch-label { 
 
    display: block; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
} 
 

 
.onoffswitch-inner { 
 
    display: block; 
 
    width: 200%; 
 
    margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch-inner:before, 
 
.onoffswitch-inner:after { 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 30px; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    font-size: 14px; 
 
    color: white; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 

 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 6px; 
 
    background-color: #85a857; 
 
    color: #FFFFFF; 
 
} 
 

 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 2px; 
 
    background-color: #EEEEEE; 
 
    color: #999999; 
 
    text-align: right; 
 
} 
 

 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 30px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: -4px; 
 
    bottom: 0; 
 
    right: 26px; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 

 
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { 
 
    right: -5px; 
 
} 
 

 
.green { 
 
    color: green; 
 
}

<!DOCTYPE> 
 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head profile="http://gmpg.org/xfn/11"> 
 
    <title></title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 

 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="container"> 
 
     <h2 align="center">Demo</h2> 
 

 
     <div class="menu_container"> 
 
     <div class="menu_font" onclick="show_menu('home');">Home</div> 
 

 
     <div class="menu_font" onclick="show_menu('id2');">Product Ordering</div> 
 
     <div class="clear"></div> 
 
     </div> 
 

 
     <div class="middle_container"> 
 
     <div id="home" style="height: 300px;"></div> 
 
     </div> 
 
     <div class="middle_container" id="id2" style="display:none"> 
 
     <div class="middle_container_left"> 
 
      <ul style="list-style-type: none;margin:0px;padding:0px;"> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li> 
 
      <li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li> 
 
      </ul> 
 
     </div> 
 
     <div class="middle_container_right" id="quick_add"> 
 
      <h2>Quick Add:</h2> 
 
      <table cellpadding="0" cellspacing="0" style="width: 300px;"> 
 
      <tr> 
 
       <td>Item Name:</td> 
 
       <td> 
 
       <input list="product_name" name="item_name" /> 
 
       <datalist id="product_name"> 
 
    \t \t \t \t \t \t \t \t <option value="112-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="112-700-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="700-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="100-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="900-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="600-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="08000BK07045"> 
 
    \t \t \t \t \t \t \t \t <option value="08000BK04045"> 
 
    \t \t \t \t \t \t \t \t <option value="08000BK06045"> 
 
    \t \t \t \t \t \t </datalist> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2"> 
 
       <div class="row col-xs-12 col-sm-12 "> 
 
        <div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div> 
 
        <div class="onoffswitch dispinline "> 
 
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
        <label class="onoffswitch-label" for="myonoffswitch"> 
 
    \t \t \t \t \t \t \t \t \t \t <span class="onoffswitch-inner"></span> 
 
    \t \t \t \t \t \t \t \t \t \t <span class="onoffswitch-switch"></span> 
 
    \t \t \t \t \t \t \t \t \t </label> 
 
        </div> 
 
       </div> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td style="height: 10px;"></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Quantity:</td> 
 
       <td><input type="textbox" name="Quantity"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="height: 10px;"></td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="height: 10px;"></td> 
 
      </tr> 
 

 
      </table> 
 
     </div> 
 
     <div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div> 
 
     <div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div> 
 
     <div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div> 
 
     <div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div> 
 
     <div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div> 
 
     <div class="clear"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 1

$(document).ready(function(){ 
 
\t $('.menu_font').click(function(){ 
 
\t \t var menutype=$(this).attr('data-menuname'); 
 
\t \t $('.menu_font').removeClass('active'); 
 
\t \t $('.pagecontent').hide(); 
 
\t \t $('.'+menutype).show(); 
 
\t \t $(this).addClass('active'); 
 
\t }); 
 
\t $('.leftmenu').click(function(){ 
 
\t \t var menutype=$(this).attr('data-leftmenuname'); 
 
\t \t $('.leftmenu').removeClass('active'); 
 
\t \t $('.middle_container_right').hide(); 
 
\t \t $('#'+menutype).show(); 
 
\t \t $(this).addClass('active'); 
 
\t }); 
 
});

.wrapper { 
 
    margin: 0px auto 0px auto; 
 
    padding: 3px 0px 0px 0px; 
 
    width: 100%; 
 
} 
 
.container{ 
 
    margin: 0px auto 0px auto; 
 
    padding: 0px 0px 0px 0px; 
 
    width: 900px; 
 
    height: 500px; 
 
    background-color: white; 
 
    border: 1px solid green; 
 
} 
 
.clear{ 
 
    clear: both; 
 
} 
 
.menu_container{  
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 900px; 
 
} 
 
.middle_container{ 
 
    margin:0px; 
 
    padding:0px; 
 
    width: 900px; 
 
} 
 
.middle_container_left{ 
 
    margin:0px; 
 
    padding:0px; 
 
    width: 300px; 
 
    height: 246px; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-top: 1px solid black; 
 
    float:left; 
 
} 
 
.middle_container_right{ 
 
    margin:0px 0px 0px 10px; 
 
    padding:0px; 
 
    width: 580px; 
 
    height: 300px; 
 
    /*border: 1px solid black;*/ 
 
    float:left; 
 
} 
 
.menu_font{ 
 
    margin: 0px 5px 0px 0px; 
 
    width: 100px; 
 
    height:30px; 
 
    float:left;cursor:hand; 
 
    text-align:center; 
 
    padding-top:5px; 
 
    font-weight:bold; 
 
    background-color: #8eaf64; 
 
    border-radius:5px 5px 0 0; 
 
    color: white; 
 
} 
 
.menu_font:hover{ 
 
    margin: 0px 5px 0px 0px; 
 
    width: 100px; 
 
    height:30px; 
 
    float:left;cursor:hand; 
 
    text-align:center; 
 
    padding-top:5px; 
 
    font-weight:bold; 
 
    color: white; 
 
    background-color:#64A70B !important; 
 
    border-radius:5px 5px 0 0; 
 
} 
 

 
.onoffswitch { 
 
    position: relative; width: 63px; 
 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
 
} 
 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 
.onoffswitch-label { 
 
    display: block; overflow: hidden; cursor: pointer; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
} 
 
.onoffswitch-inner { 
 
    display: block; width: 200%; margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 6px; 
 
    background-color: #85a857; color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 2px; 
 
    background-color: #EEEEEE; color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 30px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: -4px; 
 
    bottom: 0; 
 
    right: 26px; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
 
    right: -5px; 
 
} 
 

 

 
.green{ 
 
color: green; 
 
} 
 
.menu_font.active{ color:#fff; background-color:#06F;} 
 
.leftmenu,..menu_font{ cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="container"> 
 
     <h2 align="center">Demo</h2> 
 

 
     <div class="menu_container"> 
 
      <div class="menu_font active" data-menuname='homemenu'>Home</div> 
 

 
      <div class="menu_font" data-menuname='productmenu'>Product Ordering</div> 
 
      <div class="clear"></div> 
 
     </div> 
 

 
     <div class="middle_container pagecontent homemenu"> 
 
      <div id="home" style="height: 300px;"></div> 
 
     </div> 
 
     <div class="middle_container pagecontent productmenu" id="id2" style="display:none"> 
 
      <div class="middle_container_left"> 
 
       <ul style="list-style-type: none;margin:0px;padding:0px;"> 
 
        <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='quick_add'>Quick Add</li> 
 
        <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='solution_builder'>Solution Builder</li> 
 
        <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='bulk_load'>Bulk Load</li> 
 
        <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='product_search'>Product Search</li> 
 
        <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='saved_cart'>Saved Cart</li> 
 
        <li style="padding:10px;height:20px;" class="leftmenu" data-leftmenuname='view_favorites'>View Favorites</li> 
 
       </ul> 
 
      </div> 
 
      <div class="middle_container_right" id="quick_add"> 
 
       <h2>Quick Add:</h2> 
 
       <table cellpadding="0" cellspacing="0" style="width: 300px;"> 
 
        <tr> 
 
         <td>Item Name:</td> 
 
         <td>               
 
          <input list="product_name" name="item_name"> 
 
           <datalist id="product_name"> 
 
           <option value="112-800-00000"> 
 
           <option value="112-700-00000"> 
 
           <option value="700-800-00000"> 
 
           <option value="100-800-00000"> 
 
           <option value="900-800-00000"> 
 
           <option value="600-800-00000"> 
 
           <option value="08000BK07045"> 
 
           <option value="08000BK04045"> 
 
           <option value="08000BK06045"> 
 
           </datalist> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td colspan="2"> 
 
          <div class="row col-xs-12 col-sm-12 "> 
 
           <div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div> 
 
           <div class="onoffswitch dispinline "> 
 
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
            <label class="onoffswitch-label" for="myonoffswitch"> 
 
             <span class="onoffswitch-inner"></span> 
 
             <span class="onoffswitch-switch"></span> 
 
            </label> 
 
           </div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
        <tr><td style="height: 10px;"></td></tr> 
 
        <tr> 
 
         <td>Quantity:</td> 
 
         <td><input type="textbox" name="Quantity"></td> 
 
        </tr> 
 
        <tr><td style="height: 10px;"></td></tr> 
 
        <tr> 
 
         <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td> 
 
        </tr> 
 
        <tr><td style="height: 10px;"></td></tr> 
 

 
       </table> 
 
      </div> 
 
      <div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div> 
 
      <div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div> 
 
      <div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div> 
 
      <div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div> 
 
      <div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div> 
 
      <div class="clear"></div> 
 
     </div>  
 
    </div> 
 
</div>

Answer 2

Вы можете использовать JQuery show/hide функцию для этого.

обновленный код

$(document).ready(function(){ 
 
    $('.menu_font_home').click(function(){ 
 
     $('#id2').hide(); 
 
     $('#home').show(); 
 
    }) 
 
    
 
    $('.menu_font_product_ordering').click(function(){ 
 
     $('#quick_add,#solution_builder,#bulk_load,#product_search,#saved_cart,#view_favorites').hide(); 
 
     $('#id2').show(); 
 
    }) 
 
});

.wrapper { 
 
    margin: 0px auto 0px auto; 
 
    padding: 3px 0px 0px 0px; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    margin: 0px auto 0px auto; 
 
    padding: 0px 0px 0px 0px; 
 
    width: 900px; 
 
    height: 500px; 
 
    background-color: white; 
 
    border: 1px solid green; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.menu_container { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 900px; 
 
} 
 

 
.middle_container { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 900px; 
 
} 
 

 
.middle_container_left { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 300px; 
 
    height: 246px; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-top: 1px solid black; 
 
    float: left; 
 
} 
 

 
.middle_container_right { 
 
    margin: 0px 0px 0px 10px; 
 
    padding: 0px; 
 
    width: 580px; 
 
    height: 300px; 
 
    /*border: 1px solid black;*/ 
 
    float: left; 
 
} 
 

 
.menu_font { 
 
    margin: 0px 5px 0px 0px; 
 
    width: 100px; 
 
    height: 30px; 
 
    float: left; 
 
    cursor: hand; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
    font-weight: bold; 
 
    background-color: #8eaf64; 
 
    border-radius: 5px 5px 0 0; 
 
    color: white; 
 
} 
 

 
.menu_font:hover { 
 
    margin: 0px 5px 0px 0px; 
 
    width: 100px; 
 
    height: 30px; 
 
    float: left; 
 
    cursor: hand; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
    font-weight: bold; 
 
    color: white; 
 
    background-color: #64A70B !important; 
 
    border-radius: 5px 5px 0 0; 
 
} 
 

 
.onoffswitch { 
 
    position: relative; 
 
    width: 63px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 

 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 

 
.onoffswitch-label { 
 
    display: block; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
} 
 

 
.onoffswitch-inner { 
 
    display: block; 
 
    width: 200%; 
 
    margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch-inner:before, 
 
.onoffswitch-inner:after { 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 30px; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    font-size: 14px; 
 
    color: white; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 

 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 6px; 
 
    background-color: #85a857; 
 
    color: #FFFFFF; 
 
} 
 

 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 2px; 
 
    background-color: #EEEEEE; 
 
    color: #999999; 
 
    text-align: right; 
 
} 
 

 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 30px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: -4px; 
 
    bottom: 0; 
 
    right: 26px; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 

 
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch { 
 
    right: -5px; 
 
} 
 

 
.green { 
 
    color: green; 
 
}

<!DOCTYPE> 
 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head profile="http://gmpg.org/xfn/11"> 
 
    <title></title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 

 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="container"> 
 
     <h2 align="center">Demo</h2> 
 

 
     <div class="menu_container"> 
 
     <div class="menu_font_home">Home</div> 
 
     <div class="menu_font_product_ordering">Product Ordering</div> 
 
     <div class="clear"></div> 
 
     </div> 
 

 
     <div class="middle_container"> 
 
     <div id="home" style="height: 300px;"></div> 
 
     </div> 
 
     <div class="middle_container" id="id2" style="display:none"> 
 
     <div class="middle_container_left"> 
 
      <ul style="list-style-type: none;margin:0px;padding:0px;"> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li> 
 
      <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li> 
 
      <li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li> 
 
      </ul> 
 
     </div> 
 
     <div class="middle_container_right" id="quick_add"> 
 
      <h2>Quick Add:</h2> 
 
      <table cellpadding="0" cellspacing="0" style="width: 300px;"> 
 
      <tr> 
 
       <td>Item Name:</td> 
 
       <td> 
 
       <input list="product_name" name="item_name" /> 
 
       <datalist id="product_name"> 
 
    \t \t \t \t \t \t \t \t <option value="112-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="112-700-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="700-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="100-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="900-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="600-800-00000"> 
 
    \t \t \t \t \t \t \t \t <option value="08000BK07045"> 
 
    \t \t \t \t \t \t \t \t <option value="08000BK04045"> 
 
    \t \t \t \t \t \t \t \t <option value="08000BK06045"> 
 
    \t \t \t \t \t \t </datalist> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2"> 
 
       <div class="row col-xs-12 col-sm-12 "> 
 
        <div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div> 
 
        <div class="onoffswitch dispinline "> 
 
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
        <label class="onoffswitch-label" for="myonoffswitch"> 
 
    \t \t \t \t \t \t \t \t \t \t <span class="onoffswitch-inner"></span> 
 
    \t \t \t \t \t \t \t \t \t \t <span class="onoffswitch-switch"></span> 
 
    \t \t \t \t \t \t \t \t \t </label> 
 
        </div> 
 
       </div> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td style="height: 10px;"></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Quantity:</td> 
 
       <td><input type="textbox" name="Quantity"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="height: 10px;"></td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="height: 10px;"></td> 
 
      </tr> 
 

 
      </table> 
 
     </div> 
 
     <div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div> 
 
     <div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div> 
 
     <div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div> 
 
     <div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div> 
 
     <div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div> 
 
     <div class="clear"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>