font

5月 03, 2017

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

這次寫網頁遇到了一個情況
也就是我照常在每個頁面都加入像這樣的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

Related Posts Plugin for WordPress, Blogger...

ShareThis