2012-07-20 310 views
4

考慮的情況下,我有以下菜單:添加類導航菜單

<ul> 
<li><a href="index.php">Index</a></li> 
<li><a href="about.php">About</a></li> 
<li><a href="test.php">Test</a><li> 
</ul 

和菜單位於header.php文件。對於每個頁面(Index,About,Test),我都有index.php,about.php和test.php,並且所有這些文件都包含header.php!

我需要的是當我們在不同的頁面上時向li添加一個類。所以如果我們在about.php上,應該在第二個裏面添加這個類。

有沒有辦法處理jQuery,或者有什麼辦法來解決這個問題?

+0

你爲什麼要這麼做?好像你是複雜 – 2012-07-20 12:49:29

+1

是的,你可以添加類使用JavaScript,但不會是更容易產生對服務器端的一些問題? – Leri 2012-07-20 12:49:52

+0

根據你需要什麼類的我會按照@PLB的建議添加與PHP服務器端的類。 – 2012-07-20 12:51:03

回答

4

我用這樣的事情在我的靜態HTML網站之一,它可以適應:

<div id="navigation"> 

       <?php $currentPath = $_SERVER['REQUEST_URI']; ?> 
       <?php $currentClass = ' class="current"'; ?> 

       <ul id="nav"> 
        <li<?php if($currentPath == "/") { echo $currentClass; } ?>><a href="/">Home</a></li> 
        <li<?php if($currentPath == "/market-challenge/") { echo $currentClass; } ?>><a href="/market-challenge/">Market <br />Challenge</a></li> 
        <li<?php if($currentPath == "/environmental-benefits/") { echo $currentClass; } ?>><a href="/environmental-benefits/">Environmental <br />Benefits</a></li> 
        <li<?php if($currentPath == "/technology/") { echo $currentClass; } ?>><a href="/technology/">Technology</a></li> 
        <li<?php if($currentPath == "/contact/") { echo $currentClass; } ?>><a href="/contact/">Contact</a></li> 
       </ul> 

      </div> 

享受!

2

每個李標籤製作獨一無二的標識,當鏈路是,如果使用jQuery .attr功能

6
<ul> 
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li> 
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li> 
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li> 
</ul> 

這可能不是最好的方法上的變化單擊類,但它的任務服務器端。

+1

敢肯定它必須是$ _ SERVER [「PHP_SELF」] ==「的index.php」等雖然。 – 2012-07-20 12:54:00

+0

@MrAzulay取決於文件的位置。如果他們被訪問爲:'http:// localhost/index.php',那麼它將如我所述。 – hjpotter92 2012-07-20 12:57:31

+0

不,只是測試它。 – 2012-07-20 13:02:22

2
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     jQuery('.nav li').each(function() { 
     var href = jQuery(this).find('a').attr('href'); 
     if (href === window.location.pathname) { 
     jQuery(this).addClass('active'); 
    } 
    }); 

}); 
</script> 

將'.nav li'替換爲更適合您的DOM結構的內容。如果您的包裝div有一類菜單,請執行:jQuery('.menu li')

+0

這是一個很好的客戶端解決方案。雖然我不會做這樣的客戶端任務,但很好的答案。 – 2012-07-20 12:55:46

2

添加存儲當前頁面的會話變量(包括頭文件之前)。在頭文件中檢查這個值並分配類。如果在我看來,更乾淨的代碼

$_SESSION['currentPage'] = 'index'; 
$_SESSION['currentPage'] = 'about'; 
$_SESSION['currentPage'] = 'test'; 

在頭部,

<ul> 
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li> 
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li> 
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li> 
</ul> 
+0

爲什麼要將它存儲在會話中? – 2012-07-20 13:09:11

2

使用速記。

<?php $self = $_SERVER['PHP_SELF']; ?> 
<ul> 
    <li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li> 
    <li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li> 
    <li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li> 
</ul> 
2

對於上述問題,我已經完成了使用jQuery的codebins的解決方案。

DEMO:http://codebins.com/bin/4ldqpa4

在這裏,我所提到的步驟,上述溶液中執行。

1)在標題標籤中包含最新的jQuery.js和querystring-0.9.0.js javascript文件。

2)HTML

<div id="panel"> 
    <ul class="menu"> 
    <li> 
     <a href="#?page=0"> 
     Index 
     </a> 
    </li> 
    <li> 
     <a href="#?page=1"> 
     About 
     </a> 
    </li> 
    <li> 
     <a href="#?page=2"> 
     Test 
     </a> 
     <li> 
    </ul> 
</div> 

3)CSS

ul.menu{ 
    border:1px solid #112266; 
    background:#ccc; 
} 
ul.menu li{ 
    list-style:none; 
    display:inline-block; 
    margin-left:10px; 
    padding:0px; 
    width:60px; 
    text-align:center; 
} 
ul.menu li:hover{ 
    background:#343434; 
} 
ul.menu li a{ 
    padding:0px; 
    color:#113399; 
    text-decoration:none; 
} 
ul.menu li:hover a{ 
    color:#c6b744; 
    text-decoration:underline; 
} 
ul.menu li.active{ 
    background:#343434; 
} 
ul.menu li.active a{ 
    color:#c6b744 
} 

4)的jQuery:

$(function() { 
    $(".menu li").click(function() { 
     setTimeout(function() { 
      var page = $.QueryString("page"); 
      $(".menu li").removeClass("active"); 
      $(".menu li:eq(" + page + ")").addClass("active"); 
     }, 200); 
    }); 

}); 

在上述方案中,我必須設置像#的href鏈接?頁=因爲箱來運行新的頁面重定向Java腳本是不可能的垃圾箱以及我必須使用setTimeout函數,因爲當前頁面不是重定向只是#更改同一頁上的查詢字符串?頁=。

如果你想在你的項目,然後把上面的jQuery腳本共同的地方,以便在將執行每個菜單鏈接,並設置與活動類當前頁面的鏈接使用上面的解決方案。

注意:刪除setTimeout函數包裝只是不停地有代碼行腳本里面。它看起來像如下:

$(function() { 
     $(".menu li").click(function() { 
      var page = $.QueryString("page"); 
      $(".menu li").removeClass("active"); 
      $(".menu li:eq(" + page + ")").addClass("active"); 
     }); 
});