<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked admin-menu"> <li class="active"><a href="#" data-target-id="home"><i class="fa fa-home fa-fw"></i>Bilgilerim</a></li> <li><a href="#" data-target-id="widgets"><i class="fa fa-pencil fa-fw"></i>Sifre Guncelleme</a></li> <li><a href="#" data-target-id="pages"><i class="fa fa-file-o fa-fw"></i>Adreslerim</a></li> <li><a href="#" data-target-id="charts"><i class="fa fa-list-alt fa-fw"></i>Siparislerim</a></li> <li><a href="#" data-target-id="address-add"><i class="fa fa-list-alt fa-fw"></i>Adres ekleme</a></li> </ul> </div> <div class="col-md-9 well admin-content" id="home"> <h3> Bilgilerim </h3> <form id="tab-1"> <label>Name</label> <input type="text" value="Ahmet" class="input-xlarge"/> <label>Surname</label> <input type="text" value="Yildiz" class="input-xlarge"/> <label>Email</label> <input type="email" value="exasdasdasdasdasdamaple@asd.com" disabled> </form> </div> <div class="col-md-9 well admin-content" id="widgets"> <h3>Sifre Guncelleme</h3> <label>Eski Sifreniz</label> <input type="password" value="123456"> <label>Yeni Sifreniz</label> <input type="password" value="123456"> <label>Yeni Sifreniz(Yeniden)</label> <input type="password" value="123456"> </div> <div class="col-md-9 well admin-content" id="pages"> <h3>Adreslerim</h3> <div class="address"> <ul class="list-group"> <li class="list-group-item"> Adres Basligi </li> <li class="list-group-item"> Örnek Mah. Deneme Sk. No:24/8 </li> <li class="list-group-item"> Ankara </li> <li class="list-group-item"> Tel: 0.312.444 0532 </li> </ul> <a href="#" style="float:right;"><i class="fa fa-pencil fa-fw"> </i> Duzenle </a><br> </div> <div class="address"> <ul class="list-group"> <li class="list-group-item"> Adres Basligi </li> <li class="list-group-item"> Örnek Mah. Deneme Sk. No:24/8 </li> <li class="list-group-item"> Ankara </li> <li class="list-group-item"> Tel: 0.312.444 0532 </li> </ul> <a href="#" style="float:right;"><i class="fa fa-pencil fa-fw"> </i> Duzenle </a><br> </div> </div> <div class="col-md-9 well admin-content" id="charts"> <h3>Siparislerim </h3> <div class="address"> <ul class="list-group"> <li class="list-group-item"> Siparis No:123123 </li> <li class="list-group-item"> Siparis Durumu:asd </li> <li class="list-group-item"> Siparis Tutaru:123123 </li> </ul> </div> </div> <div class="col-md-9 well admin-content" id="address-add"> <h3>Adres Ekleme </h3> Duzenle linkine basinca acilacak olan sayfa. Form dolu halde gelecek <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Source address</legend> <!-- Select Basic --> <div class="form-group"> <label class="col-md-2 control-label" for="Country">Country</label> <div class="col-md-5"> <select id="Country" name="Country" class="form-control"> <option value="IR">IR Iran</option> <option value="USA">United States</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="State">State</label> <div class="col-md-6"> <input id="State" name="State" type="text" placeholder="state" class="form-control input-md" required=""> <span class="help-block">Enter Source state</span> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="State">Name</label> <div class="col-md-6"> <input id="Name" name="Name" type="text" placeholder="name" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="city">City/Town</label> <div class="col-md-6"> <input id="city" name="city" type="text" placeholder="city or town" class="form-control input-md" required=""> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="city">Phone number</label> <div class="col-md-6"> <input id="phone" name="phone" type="text" placeholder="phone number" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="address1">Address Line1</label> <div class="col-md-8"> <input id="address1" name="address1" type="text" placeholder="" class="form-control input-md"> <span class="help-block">Street address, P.O. box, company name, c/o</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Address2">Address Line2</label> <div class="col-md-8"> <input id="Address2" name="Address2" type="text" placeholder="" class="form-control input-md"> <span class="help-block">Apartment, suite , unit, building, floor, etc.</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="zip">Zip/Postal code</label> <div class="col-md-4"> <input id="zip" name="zip" type="text" placeholder="zip or postal code" class="form-control input-md" required=""> </div> </div> </fieldset> </form> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); body{margin-top:20px; font-size:15px;} .fa-fw {width: 2em;} label{ display:block; } input{ margin-bottom:8px; width:260px; } .address{ background-color:#e5e5e5; padding:15px; border-radius:2px; margin:5px; } .list-group-item{ background-color:#e5e5e5; border:none; padding:0px; margin-top:4px; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { padding: 4px 6px; }

$(document).ready(function() { var navItems = $('.admin-menu li > a'); var navListItems = $('.admin-menu li'); var allWells = $('.admin-content'); var allWellsExceptFirst = $('.admin-content:not(:first)'); allWellsExceptFirst.hide(); navItems.click(function(e) { e.preventDefault(); navListItems.removeClass('active'); $(this).closest('li').addClass('active'); allWells.hide(); var target = $(this).attr('data-target-id'); $('#' + target).show(); }); });