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

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

我只展示一個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熱心網友回復：

如果你media的onclick="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>        

標籤：javascript html css 标签

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

下一篇：返回列表