Programlama

Web Programlama

Veritabanı

Video Dersler

jQuery ile aktif menü seçeneğini belirleme

Web sitelerinde bir menü seçeneği seçerek sayfa değiştirmelerde, seçilen sayfanın hangisi olduğunu menü üzerinde göstermek için aşağıdaki yöntem uygulanabilir.

<html>
<head>

<style type="text/css">
    .active {
        font-weight: bold;
        color: #FF0000;	
    }
<style>

<script type="text/javascript">
    $(document).ready(function() { 			
        var path = location.pathname.substring(1); // Aktif sayfa
        // Eğer aktif sayfa tanımlaması içinde alt dizinler varsa ve sadece dosya adını 
        // elde etmek gerekirse
        if (path.lastIndexOf("/")) path = path.substr(path.lastIndexOf("/") + 1); 
        // Aktif sayfanın içinde yer aldığı href tanımlamasını içeren li seçeneğine
        // active özelliği eklenir.
        if (path) $('.plink a[href$="' + path + '"]').parent("li").addClass("active");
    });
</script>

</head>

<body>

<div>
    <ul>
        <li class="plink"><a href="menu01.html">Menü 1</a></li>
        <li class="plink"><a href="menu02.html">Menü 2</a></li>
        <li class="plink"><a href="menu03.html">Menü 3</a></li>
        <li class="plink"><a href="menu04.html">Menü 4</a></li>
    </ul>	
</div>

</body>
</html>