I have a sidebar in body and also I have a content section in body. You can think
<aside class="sidebar-left-collapse">
<a href="#" class="company-logo">Logo</a>
<div class="sidebar-links">
<div class="link-yellow selected">
<a href="katalog/camgurubu.html">
KAPAK
</a>
</div>
<div class="link-blue">
<a href="katalog/cam2.html">
CAM GURUBU
</a>
<ul class="sub-links">
<li><a href="#">Paşabahçe</a></li>
</ul>
</div>
<div class="link-red">
<a href="#">
PORSELEN GURUBU
</a>
<ul class="sub-links">
<li><a href="#">KÜTAHYA PORSELEN</a></li>
<li><a href="#">BONNA PORSELEN</a></li>
</ul>
</div>
<div class="link-yellow">
<a href="#">
ÇATAL/KAŞIK/BIÇAK
</a>
<ul class="sub-links">
<li><a href="#">ARYILDIZ ÇATAL/KAŞIK/BIÇAK</a></li>
<li><a href="#">ŞEHZADE ÇATAL/KAŞIK/BIÇAK</a></li>
<li><a href="#">ALMOND ÇATAL/KAŞIK/BIÇAK</a></li>
<li><a href="#">NARİN ÇATAL/KAŞIK/BIÇAK</a></li>
</ul>
</div>
<div class="link-green">
<a href="#">
MUTFAK SET ÜSTÜ MALZEMELERİ
</a>
<ul class="sub-links">
<li><a href="#">DOLLY PLASTİK ÜRÜNLER</a></li>
<li><a href="#">PİRGE BIÇAKLARI</a></li>
<li><a href="#">VİCTORİNOX BIÇAKLARI</a></li>
<li><a href="#">İTHAL MALZEME SET ÜSTÜ GRUBU</a></li>
<li><a href="#">BORA SAKLAMA KABI VE DİĞER MALZEMELER</a></li>
<li><a href="#">TÜRKAY POLİETİLEN GRUPLARI</a></li>
<li><a href="#">CAMBRO ÜRÜNLERİ</a></li>
<li><a href="#">PLASTİK,POLİKARBON MALZEMELER</a></li>
<li><a href="#">KÜLSAN (THERMOSET MALZEMELER)</a></li>
<li><a href="#">NARİN SET ÜSTÜ MALZEMELERİ</a></li>
<li><a href="#">ARYILDIZ SET ÜSTÜ MALZEMELER</a></li>
<li><a href="#">ALTINBAŞAK TEFLON TAVALAR,FAJİTA GRUPLARI, SET ÜSTÜ ÜRÜNLER</a></li>
<li><a href="#">TEL KEVGİR, SÜZGEÇ, ÇIRPICI ÜRÜNLER GURUBU</a></li>
<li><a href="#">KEPÇE, KEVGİR, SPATULA, MAŞA SERVİS GRUPLARI</a></li>
<li><a href="#">TRİBECA ÜRÜN GRUPLARI</a></li>
<li><a href="#">ALKAN-ZİCCO ÜRÜN GRUPLARI</a></li>
<li><a href="#">ÇÖP KOVALARI</a></li>
<li><a href="#">TENCERELER</a></li>
<li><a href="#">KAÇAROLA/KÜVETLER</a></li>
<li><a href="#">DERİ ÜRÜNLERİ VE MENÜLER</a></li>
<li><a href="#">PİZZA TAVALARI</a></li>
<li><a href="#">FIRIN KÜREKLERİ</a></li>
</ul>
</div>
<div class="link-green">
<a href="#">
AÇIK BÜFE EKİPMANLARI
</a>
<ul class="sub-links">
<li><a href="#">İTHAL AÇIK BÜFE MALZEMELERİ</a></li>
<li><a href="#">CHAFİNG DISH</a></li>
<li><a href="#">BORA AÇIK BÜFE ÜRÜNLER</a></li>
<li><a href="#">ALKAN-ZİCCO AÇIK BÜFE ÜRÜN GRUPLARI</a></li>
<li><a href="#">GÜREN METAL AÇIK BÜFE ÜRÜNLERİ</a></li>
<li><a href="#">KÜLSAN AÇIK BÜFE ÜRÜNLER</a></li>
</ul>
</div>
<div class="link-green">
<a href="#">
PASTAHANE EKİPMANLARI
</a>
<ul class="sub-links">
<li><a href="#">ARYILDIZ PASTAHANE ÜRÜNLERİ</a></li>
<li><a href="#">PASTA,KEK KALIPLARI ALÜMİNYUM MALZEMELER</a></li>
</ul>
</div>
<div class="link-green">
<a href="#">
GENEL MALZEME GRUBU
</a>
<ul class="sub-links">
<li><a href="#">PLASTİK TAŞIMA EKİPMANLARI VE AKSESUARLARI</a></li>
<li><a href="#">KAHVE MAKİNALARI </a></li>
<li><a href="#">AHŞAP SERVİS EKİPMANLARI</a></li>
</ul>
</div>
<div class="link-green">
<a href="#">
CİHAZLAR
</a>
<ul class="sub-links">
<li>
<div class="link-green">
<a href="#">
HAZIRLIK
</a>
<ul class="sub-links">
<li><a href="#"> Arda </a></li>
<li><a href="#"> Zaman </a></li>
<li><a href="#"> Deneme</a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KAFETERYA CİHAZLARI
</a>
<ul class="sub-links">
<li><a href="#"> Arda </a></li>
<li><a href="#"> Zaman </a></li>
<li><a href="#"> Deneme</a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
BULAŞIKHANE
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 600 SERİ
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 700 SERİ
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 900 SERİ
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KONVEKSİYONLU FIRINLAR
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
SOĞUTMA EKİPMANLARI
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEŞHİR ÜRÜNLERİ
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
RAF ÜRÜNLERİ
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEZGAH/DAVLUMBAZ/YER SÜZGEÇLERİ
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
ÇAMAŞIRHANE GRUBU
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
İTHAL ÜRÜNLER
</a>
<ul class="sub-links">
<li><a href="#"></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</aside>
<div class="main-content">
<div class="menu">
<section id="content">
</section>
</div>
</div>
When I update content section with ajax dropdown menu doesn't work. I think the problem is, menu selected class unchanged because ajax refresing page.
var links = $('.sidebar-links > div');
var links2 = $('.sidebar-links > div > ul.sub-links > li > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
links2.on('click', function () {
links2.removeClass('selected');
$(this).addClass('selected').show();
});
$('.sidebar-links div a').on('click' ,function(){
var yol = $(this).attr('href');
$(this).attr("href", "#");
$.ajax({
async: true,
type: "GET",
url: yol,
success: function (html) {
$("#content").html(html);
}
});
});
