Programlama

Web Programlama

Veritabanı

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>