基本标签导航在 html 中不起作用

Question

即将完成，但无法正常工作。我认为有一个小错误。请纠正我的错误。提前谢谢你

我只展示了一个 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>

请纠正我的错误..提前谢谢你

Answer 1

如果 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>

基本标签导航在 html 中不起作用

Basic tab navigation is not working in html

html

javascript

css

tabs