如果你的class只需要在特定頁面時加上，就用JS判斷目前頁面來寫function吧

5月 03, 2017



這次寫網頁遇到了一個情況
也就是我照常在每個頁面都加入像這樣的php語法：
<?php include('header.php');?>

...
..
.

<?php include('footer.php');?>
來共用header跟footer，
結果有個小問題是首頁(index.php)需要用到的header稍稍的有點不一樣
需要在某一行code裡面多加一行class屬性
但是我的header.php是所有頁面共用的
該怎麼樣指定在首頁的時候才會多這個class屬性咧?!

原本我是複製header.php裡面的code，
另外存了一個header_index.php給首頁用，
不過問題在於這種做法很蠢，而且等於我以後要改header都要改兩次
既然學了JS，而且其實只是當頁面是index.php時要在某行code裡面多加一個屬性，
於是我就研究了一下該怎麼樣寫一個語法是這麼作用的：
1. 判斷當前的頁面
2. 如果當前頁面是index.php那就在#navigation的class裡面加一個屬性叫affix
後來研究出這個寫法，加在footer的jquery.js後面完全成功了:

<script type="text/javascript">

$(function() {
  if( location.pathname == '/sharktech/index.php') { 
    $('#navigation').addClass('affix'); 
  };
});

</script>
location.pathname是取得當前的path的路徑，
if就是用來判斷這個路徑是否等於我指定的頁面，
如果成立下方那一行addClass的函數就會作用。
寫成功了真是開心XD
有一系列的寫法，假設我所在的頁面網址是 blog.weibbb.com:80/bb.php?tid=001#002，
以下就是會輸出值的：
location.href　//輸出値 http://blog.weibbb.com/bb.php?tid=001#002
location.protocol // 輸出値 http:
location.hostname // 輸出値 blog.weibbb.com
location.host // 輸出値 blog.weibbb.com
location.port // 輸出値 80(不過實際測試是沒顯示)
location.pathname // 輸出値 /bb.php
location.search // 輸出値 ?tid=001
location.hash //  輸出値 #002
參考文章:
用 JavaScript 取得目前網址與其它網址參數簡單語法

Share This Story

Tags:

You Might Also Like

1 意見