2015-07-20 37 views
1

我嘗試了很多建議的jquery代碼,最終找到了一個幾乎可以工作的代碼。在.php頁面上設置jquery的活動鏈接 - 不起作用

但它有一個缺陷 - 點擊一個鏈接後 - 鏈接將變爲非高亮顯示一秒(只要頁面加載),然後激活。點擊頁面完成加載php/html之後,是否可以立即高亮顯示鏈接?

因爲動畫可能性,找到jquery或javascript解決方案會很好嗎? 什麼是製作網站/主頁菜單的常用方式?

在此先感謝!所有的解釋或代碼示例都會非常棒!

HTML:

<DOCTYPE! html> 
<html> 
<head> 
    <title>TESTLEHT</title> 
    <link rel="stylesheet" href="style.css" type="text/css" > 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 

</head> 
<body> 

<div class="naviwrap"><?php include("includes/menu.php"); ?></div> 
<div class="clear"></div> 
<div class="content"></div> 
<div class"footer"><?php include("includes/footer.php"); ?></div> 

<script src="scripts.js" type="text/javascript"></script> 

</body> 
</html> 

包括菜單文件:

<nav class="menu"> 
      <ul class="clearfix"> 
       <li id="linkone" class="jlist" data-linkid="link1"><a href="index.php">Avaleht</a></li> 
       <li id="linktwo" class="jlist" class="current-item" data-linkid="link2"><a href="meist.php">Meist</a></li> 
       <li id="linkthree" class="jlist" data-linkid="ink3"><a href="tooted.php">Tooted</a></li> 
       <li id="linkfour" class="jlist" data-linkid="link4"><a href="galerii.php">Galerii</a></li> 
       <li id="linkfive" class="jlist" data-linkid="link5"><a href="kontakt.php">Kontakt</a></li> 

      </ul> 
    </nav> 

CSS: 。菜單一{ 過渡:所有線性0.30s; 顏色:#ABABAB; font-size:16px; text-decoration:none; }

.menu li:hover > a, .menu .current-item > a { 
    text-decoration: none; 
    color: red; 
} 

.menu li:active > a, .menu .current-item > a { 
    color: red; 
} 

.menu > ul > li { 
    float: left; 
    display: inline-block; 
    position: relative; 
    font-size: 105%; 
} 

.menu > ul > li > a { 
    padding: 15px 45px; 
    margin-top: 15px; 
} 

.menu > ul > li:hover > a, .menu > ul > .current-item > a { 
    color: #282828; 
} 

當前的jQuery代碼,幾乎工程:

$(function() { 

    var str = location.href.toLowerCase(); 

    $('nav ul li a').each(function() { 

     if (str.indexOf(this.href.toLowerCase()) > -1) { 
      $('a.current-item').removeClass('current-item'); 
      $(this).parent().addClass('current-item'); 
     } 
    }); 
}); 
+0

嘗試把內'$(文件)。就緒()jQuery代碼;' – Jessica

回答

0

這似乎是一個網頁的正常行爲。當一個頁面加載時,人們知道事情會變得有點時髦。

如果您想了解頁面如何轉換,您需要查看單頁應用程序(SPA),這通常意味着當您單擊鏈接時只加載頁面的一部分 - 這是使用Ajax完成的。它可以像自定義jQuery腳本一樣簡單,也可以使用Angular或Backbone等較大的框架,或者像Sammy JS這樣的較小的框架。

還有像jQuery SmoothState這樣的預製jQuery腳本,您不必擔心製作部分頁面。 SmoothState會在下一頁加載時會延遲加載並檢查下一頁,並且只更改不同頁面的區域。它支持動畫頁面轉換,以及預加載「下一頁」頁面(比鏈接上的鼠標事件更快),使事情看起來更快一點。

https://en.wikipedia.org/wiki/Single-page_application

https://angularjs.org/

http://backbonejs.org/

http://sammyjs.org/

http://miguel-perez.com/articles/add-page-transitions-with-smoothstate/