2013-07-06 107 views
0

在當前菜單我不強調我的默認網頁獲得成功,那就是e.g:www.mydomain.com。 當它被重定向到index.php和其他菜單鏈接時,它很好,當它是沒有其他文件的普通域我不行。 我寫了下面的Jquery只是放大鏈接的字體大小,並把它變成白色:突出默認頁面的導航條

$(function() { 
      var path = window.location.href; 
      path = decodeURIComponent(path); 
      path =path.substr(path.lastIndexOf("/") +1); 

      $('#menu a').each(function() { 
       var href = $(this).attr('href'); 
       href=href.substr(href.lastIndexOf("/") +1); 
       if (href.indexOf(path) != -1 && path != "") { 
        $(this).closest('li').find('a').css({'color': 'white' , 'font-size' : '18px' }); 
         } 
       }); //end of each function 
      }); 

HTML標記是:

<div id="menu"> 
      <ul> 
      <li><a href="$doc_root/index.php" title="Home Page">Home</a></li> 
      <li><a href="$doc_root/travel/grid.php" title="My Trips">travelling</a></li> 
      <li><a href="#">images</a></li> 
      <li><a href="#">words</a></li> 
      <li><a href="#">about</a></li> 
      </ul> 
    </div> 

我怎樣才能改變我的第一個鏈接菜單「首頁「只有域名被寫入才能成爲新的字體和顏色(www.mydomain.com)? 我希望它被突出顯示,就像index.php被選中一樣。 很多。 M P.S.無論將域名直接重定向到index.php(我通常知道如何去做,我不知道如何與Aruba做到這一點),我正在尋找一個不錯的「編程」解決方案。

回答

1

在每一頁上,設定變數帶有頁面名稱的PHP,所以對於index.php,設置一個值爲'home'的變量。爲每個單獨的菜單項目執行此操作。然後在每個頁面加載檢查這個變量名稱,並添加一個類到相關的菜單項。事情是這樣的:

<?php 
$menuItems = array(
    'Home' => array('text' => 'Home', 'url' => '/'), 
    'Page1' => array('text' => 'Page 1','url' => '/page-1'), 
    'Page2' => array('text' => 'Page 2', 'url' => '/page-2'), 
    'Page3' => array('text' => 'Page 3', 'url' => '/page-3'), 
    'Page4' => array('text' => 'Page 4', 'url' => '/page-4'), 
); 
?> 
<div id="nav"> 
    <ul> 
    <?php 
    $miCounter = 1; 
    foreach($menuItems as $key => $value): 
     $currentLink = ''; 
      if($pageName === $key): 
       $currentLink = 'class="selected"'; 
      endif; 
     ?> 
     <li> 
      <a <?php echo $currentLink; ?> href="<?php echo $value['url']; ?>"> 
       <?php echo $value['text']; ?> 
      </a> 
     </li> 
     <?php 
    endforeach; 
    ?> 
    </ul> 
</div> 

所以,當你的當前頁面是「主頁」($pageName),它會增加class="selected"到菜單鏈接。然後在你的css中創建你需要的selected類的任何背景或顏色樣式。

+0

ok阿德里安,當然,我認爲你錯了$ value ['class'],或者至少我認爲是這樣,我的問題沒有解決。 –

+0

Thicks Adrian,你知道一種方法來重定向域和域/ index.php的一些PHP代碼?我的意思是,我不能編輯Apache服務器文件會導致我的網站上的一些服務提供商這不是讓我來編輯這些配置託管。THKS MPS我相信你是錯$值「類」] –

+0

你的意思是,當你去www.domain.com(例如)它不會自動調用完全相同www.domain.com/index.php –

1

我想你應該可以將你的Home鏈接改爲/,因爲index.php是[通常]默認的文檔索引名稱,可以省略。

此外,考慮你的榜樣,我認爲這將是使用window.location.pathname,而不是window.location.href更方便。

#menu a.curpage { 
    color: white; 
    font-size: 18px; 
} 

$('#menu a').each(function() { 
    if (this.href == window.location.pathname) { 
     $(this).addClass('curpage'); 
    } 
}); 

如果菜單是儘可能短,在給定的例子五個項目,你可以簡單地避免使用JS可言,看到這個主題的答案:Active Menu Highlight CSS

+0

好,好,因爲以前更長JS的替代,我還是解決不了我的領域問題。當它是www.example.com時,我不能讓它具有相同的風格,然後www.example.com/index.php。 :-( –

1

對不起,撞到一個老話題,但我剛剛有同樣的問題,我找到了解決辦法。

$(document).ready(function() { 
    $("#menu [href]").each(function() { 
     if (this.href == window.location.href) { 
      $(this).addClass("active"); <-- INSERT NAME OF YOUR CLASS 
     } 
     if(window.location.href == "http://YOUR-DOMAIN.??/") { 
      $(window.location.href = "http://YOUR-DOMAIN.??/index.php"); 
      $(this).addClass("active"); <-- INSERT NAME OF YOUR CLASS 
     } 
    }); 
}); 

會重定向從http://your-domain.com/http://your-domain.com/index.php,並設置了「積極」級。