多個頁面鏈接活躍

-1

頁，我想通過這門課積極變化當我切換

頁

<nav class="main-navi"> 
     <ul> 
      <li> 
       <a id="homeLink" href="index.html"> 
        Home 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li > 
       <a id="portfolioLink" href="portfolio_masonry.html"> 
        Portfolio 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li > 
       <a href="about.html"> 
        About 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li> 
       <a class="active" href="service.html"> 
        services 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li> 
       <a href="blog.html"> 
        Blog 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
      <li> 
       <a href="contact.html"> 
        contacts 
        <span class="dot"></span> 
        <span class="corner"></span> 
       </a> 
      </li> 
     </ul> 
    </nav>

我知道這將需要JavaScript，但我太新手關於JavaScript的，你們可以幫我？並做每一個頁面有腳本？謝謝你們

來源

2016-02-13 vandi

你將不得不在你的HTML文件的頭部包含此自己寫腳本。我會花一些時間，看看jQuery和一些jQuery食譜（爲特定目標設計的小部分代碼 - 像你的），看看它們離你有多近。從那裏開始修補。 – akaphenom

// grab all elements with the classes dot and corner 
var all = document.getElementsByClassName(dot, corner); 

// if the url contains any of the below then we set the classname of dot and corner 
var contains = "example" 
var contains2 = "example2" 
var contains3 = "example3" 
var contains4 = "example4" 

function setclassname() { 
    if (window.location.href.indexOf(contains || contains2 || contains3 || contains4) > -1) { 
     // change newclassname to your preferred classname. 
     all.className = newclassname; 
    } 
}

將onclick添加到您的跨度，將.js文件包含在您的html頁面中並更改變量。（閱讀我放置的評論）

來源

2016-02-13 23:12:10 iSidle

每頁只有腳本，你放在它上面。我建議採取腳本並製作自己的腳本/文件，然後將其包含在所有頁面上。

您可以使用window.location.href獲取當前頁面的網址。然後你可以編寫一些邏輯來添加一個active類或其他東西到列表中的任何元素匹配當前的URL。

來源

2016-02-13 23:01:29

你可以使用Bootstrap來建立一個導航欄。它將採用active類的<li>元素。

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

getbootstrap.com

這裏有一個演示引導導航欄：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>

codepen.io/anon/pen/KVbOvo

www.w3schools.com/bootstrap/bootstrap_navbar.asp

來源

2016-02-13 23:31:36 htcsml4792

多個頁面鏈接活躍

回答

相關問題