iT邦幫忙

0

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

  • 分享至 

  • xImage

我是個新手,我想做一個部落格的導航欄,但我不知道要怎麼做出點擊導航欄後跳轉至指定頁面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 }} |
{{ formatDate(item.duration) }}
直播中
0
japhenchen
iT邦超人 1 級 ‧ 2021-08-13 08:20:11
最佳解答

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

0
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

0
<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>

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

我要發表回答

立即登入回答