點擊導航欄後跳轉至指定頁面or內容

css tab code

CherryYang 2021-08-12 17:34:42 ‧ 1612 瀏覽

分享至

我是個新手，我想做一個部落格的導航欄，但我不知道要怎麼做出點擊導航欄後跳轉至指定頁面or內容 : (
跪求大神指導～！！

HTML程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Inspi網站</title>
        <link rel="icon" href="抹茶式微笑Logo.png">
        <link rel="stylesheet" href="index.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <nav class="nav">
              <a class="bar_a" aria-current="page" target='_self' href="#">部落格</a>
              <a class="bar_a" aria-current="page" target='_self' href="#">服務</a>
              <a class="bar_a" aria-current="page" target='_self' href="#">關於Inspi.</a>
        </nav>

    </body>
</html>

CSS程式碼：

.bar_a{
    text-decoration: none;
    color: white;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.4px;
    font-size: 33px;
    margin-left: 6.2%;
}
nav{
    background-color: rgb(106, 141, 90);
    height: 12.7%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    user-select: none;
    letter-spacing: 50px;
    display: inline-flex;
    align-items: center;
    z-index: 1;
}
.bar_a:hover{
    font-size: 37px;
    color: #f8fff6;
    transition: 0.17s;
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

japhenchen

iT邦超人 1 級 ‧ 2021-08-13 08:20:11

最佳解答

我的猜想，你是想把導航條做成固定不動，點擊導航條內連結，會變動的是下方窗體而不是整個畫面重載，對吧？那你可以往iframe的方向想，做法直接引用別人的資料給你參考
https://www.fooish.com/html/iframe-tag.html

回應
分享
檢舉

登入發表回應

Hankz

iT邦新手 2 級 ‧ 2021-08-12 17:39:23

假設資料夾內有以下三個檔案
blog.html
service.html
about.html

則

<a class="bar_a" aria-current="page" target='_self' href="./blog.html">部落格</a>
<a class="bar_a" aria-current="page" target='_self' href="./service.html">服務</a>
<a class="bar_a" aria-current="page" target='_self' href="./about.html">關於Inspi.</a>

HTML學習資源：
https://www.w3schools.com/tags/tag_a.asp

回應
分享
檢舉

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-08-12 17:47:44

<a class="bar_a" aria-current="page" target='_self' href="/">我的首頁</a>
<a class="bar_a" aria-current="page" target='_self' href="#">原頁</a>
<a class="bar_a" aria-current="page" target='_self' href="https://www.google.com">去 GOOGLE</a>
<a class="bar_a" aria-current="page" target='_self' href="https://www.hinet.net">去HINET</a>
<a class="bar_a" aria-current="page" target='_self' href="/BOLOG">連我的BOLOG目錄</a>

話說~~這是基本中的基本。再加強一下吧。
上面可以看的懂就看吧。看不懂就去買書來學一下。