主頁 > 後端開發 > 基本選項卡導航在html中不起作用

基本選項卡導航在html中不起作用

2022-05-15 21:08:13 後端開發

幾乎完成,但它不作業。我認為有一個小錯誤。請糾正我的錯誤。先感謝您

我只展示一個navcontent我的頁面中已經有 Facebook 和 Instagram 的內容。這不是問題所在。

function socialMedia(media, mediaName) {
  var i, navcontent, navlinks;
  tabcontent = document.getElementsByClassName("navcontent");
  for (i = 0; i < navcontent.length; i  ) {
    navcontent[i].style.display = "none";
  }
  navlinks = document.getElementsByClassName("navlinks");
  for (i = 0; i < navlinks.length; i  ) {
    navlinks[i].className = navlinks[i].className.replace(" active", "");
  }
  document.getElementById(mediaName).style.display = "block";
  media.currentTarget.className  = " active";
}
.nav {
  overflow: hidden;
  margin-top: 50px;
}

button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 0px;
  height: 50px;
  width: 110px;
  transition: 0.3s;
  font-size: 17px;
  color: #360b9a;
  transition: .5s all;
}

button:hover {
  font-weight: 700;
}

.active {
  background-color: #ccc;
}

.navcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<div class="nav">
  <button class="navlinks" onclick="socialMedia(media, 'Twitter')">Twitter</button>
  <button class="navlinks" onclick="socialMedia(media, 'Facebook')">Facebook</button>
  <button class="navlinks" onclick="socialMedia(media, 'Instagram')">Instagram</button>
</div>

<div id="Twitter" class="navcontent">
  <p>
    Look no more if you are after a venue to host thousands of delegates for highly exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the flexibility to customize the venue according to your space and event requirements.
  </p>
  <p>
    Look no more if you are after a venue to host thousands of delegates for highly exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the flexibility to customize the venue according to your space and event requirements.
  </p>
  <div class="sub">
    <a>#lorem</a>
    <a>#ipsum</a>
    <a>#lorem</a>
  </div>
</div>

請糾正我的錯誤..提前謝謝你

uj5u.com熱心網友回復:

如果你mediaonclick="socialMedia(media, 'Twitter')"意思是點擊的元素,那么它應該是this. 然后你可以像media.className在函式中一樣參考它。

function socialMedia(media, mediaName) {
    var i, navcontent, navlinks;
    navcontent = document.getElementsByClassName("navcontent");
    for (i = 0; i < navcontent.length; i  ) {
        navcontent[i].style.display = "none";
    }
    navlinks = document.getElementsByClassName("navlinks");
    for (i = 0; i < navlinks.length; i  ) {
        navlinks[i].className = navlinks[i].className.replace(" active", "");
    }
    document.getElementById(mediaName).style.display = "block";
    media.className  = " active";

}
.nav {
        overflow: hidden;
        margin-top: 50px;

        button{
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 15px 0px;
            height: 50px;
            width: 110px;
            transition: 0.3s;
            font-size: 17px;
            color: #360b9a;
            transition: .5s all;

            &:hover {
                font-weight: 700;
            }
        }

        .active {
            background-color: #ccc;
        }

    }
    .navcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
<div class="nav">
            <button class="navlinks" onclick="socialMedia(this, 'Twitter')">Twitter</button>
            <button class="navlinks" onclick="socialMedia(this, 'Facebook')">Facebook</button>
            <button class="navlinks" onclick="socialMedia(this, 'Instagram')">Instagram</button>
        </div>

        <div id="Twitter" class="navcontent">
            <p>
                Look no more if you are after a venue to host thousands of delegates for highly 
                exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the 
                flexibility to customize the venue according to your space and event requirements.
            </p>
            <p>
                Look no more if you are after a venue to host thousands of delegates for highly 
                exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the 
                flexibility to customize the venue according to your space and event requirements.
            </p>
            <div class="sub">
                <a>#lorem</a>
                <a>#ipsum</a>
                <a>#lorem</a>
            </div>
        </div>
        <div id="Facebook"></div>
        <div id="Instagram"></div>        

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/474749.html

標籤:javascript html css 标签

上一篇:根據程式名稱組合兩個資料集

下一篇:返回列表

標籤雲
其他(140575) Python(32497) JavaScript(20482) Java(15603) C(13657) 區塊鏈(8222) AI(7469) 基礎類(6313) C#(6297) MySQL(6088) 爪哇(5919) html(5391) 腳本語言(PerlPython)(5129) 熊猫(5042) PHP(5006) sql(4975) 非技術區(4971) Linux(4733) 数组(4526) R(4422) Android(4340) 反应(4018) 数据框(3527) css(3437) C語言(3288) 节点.js(3227) C++語言(3117) Java相關(2746) 疑難問題(2699) json(2682) 列表(2561) 單片機工控(2479) 扑(2470) 安卓(2455) VBA(2449) 打字稿(2323) 细绳(2092) ASP.NET(2077) iOS(2028) Web開發(1951) MongoDB(1899) 麻木的(1824) 循环(1823) 字典(1819) 網絡通信(1793) 蟒蛇-3.x(1774) 數據庫相關(1767) 正则表达式(1757) 擅长(1755) VB基礎類(1755) .NETCore(1732) 镖(1728) 迅速(1707) C++(1654) 開發(1646) Unity3D(1638) .NET技术(1617) 系統維護與使用區(1617) HtmlCss(1594) 功能(1581)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • 基本選項卡導航在html中不起作用

    幾乎完成,但它不作業。我認為有一個小錯誤。請糾正我的錯誤。先感謝您我只展示一個navcontent。我的頁面中已經有 Facebook 和 Instagram 的內容。這不是問...

    uj5u.com 2022-05-15 21:08:13 more
  • 根據程式名稱組合兩個資料集

    嗨,我正在努力找出實作某事的最佳方法。我實際上是在進行兩次資料庫呼叫const [emails] = await dbConnection.execute('SELECT name, programme, timestamp...

    uj5u.com 2022-05-15 21:07:25 more
  • 從firestore獲取檔案,無需搜索特定的uid

    我在獲取收藏資訊時遇到問題。使用此代碼,我只能獲取具有特定 uid 的檔案。const snapShot = doc(db, 'Files', 'someUID');const getSnapShot = await getD...

    uj5u.com 2022-05-15 21:06:11 more
  • ReactRouterDom-ReactRouter更改url但不更改頁面

    我正在嘗試使用反應制作一個簡單的路由系統,但是當我單擊鏈接導航到另一個頁面時,它只會更改 URL 但不顯示內容,然后當我按 F5 時,它會顯示一切正常。這是我的...

    uj5u.com 2022-05-15 21:04:50 more
  • SpringMVC(5)-ssm整合實作增刪改查-mybatis層

    mybatis層撰寫完畢后的專案目錄 1.右鍵SpringMVC2專案-》new-》Modual-》選擇maven專案(我的專案名為Study09_ssm),輸入模塊名,點擊Finish 2.第二部的操作就是將idea的基本運行環境搞定,包括:添加web支持,配置tomcat,配置project s ......

    uj5u.com 2022-05-15 20:25:59 more
  • 從Windows中洗掉IE會影響XMLHTTP60嗎?

    當 IE 從 Windows 中洗掉時,這會影響 XMLHTTP60 和我的 Excel VBA 代碼嗎?怎么可能確認?
    uj5u.com熱心網友回復:tl;dr:MSXML6 在 Edge 中可用。由于 MS 沒有...

    uj5u.com 2022-05-15 20:02:42 more
  • 如果特定列在使用Python的Excel作業表中具有背景顏色,則讀取整行

    我有一個 excel 表,其中有幾列背景顏色。我需要獲取所有具有背景顏色的行column B。我試過styleframe但只能從 excel 中選擇特定的單元格,而不是整行。from s...

    uj5u.com 2022-05-15 20:01:02 more
  • 將資料從多個Excel檔案復制到Masterfile

    當談到 VBA 時,我目前是新手,我遇到了需要該領域專家的問題。所以我有一個名為 Archive 的 Masterfile 和 Extract 按鈕,我在一個檔案夾中有多個 excel 作業簿...

    uj5u.com 2022-05-15 19:58:48 more
  • JAVA的型別轉換(基本型別)

    #型別轉換 由于java是強型別語言,所以在進行某些運算的時候,需要用到型別轉換。 低-->高指的是位元組大小,從小到大。 小數的優先級大于整數 數值進行型別轉換時不要讓資料溢位 由低到高可以直接轉換,無需額外代碼。 注意點: 1 不能對布林值進行轉換 2 不能把物件型別轉換為不相干的型別 3 在把高 ......

    uj5u.com 2022-05-15 19:20:26 more
  • 基于Nacos實作GateWay動態路由功能

    開發環境: SpringBoot: 2.6.5 SpringCloud: 2021.0.0 SpringCloudAlibaba: 2021.0.1.0 Nacos: 2.1.0 代碼: @Slf4j @Component public class MyInMemoryRouteDefinition ......

    uj5u.com 2022-05-15 18:55:14 more