Almost done but it isn't working. I think there is a small mistake. Please correct my mistake. Thank you in advance

I am showing only one navcontent. I already have Facebook and Instagram contents in my page.. that is not the problem here.

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 >
  <button  onclick="socialMedia(media, 'Twitter')">Twitter</button>
  <button  onclick="socialMedia(media, 'Facebook')">Facebook</button>
  <button  onclick="socialMedia(media, 'Instagram')">Instagram</button>
</div>

<div id="Twitter" >
  <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 >
    <a>#lorem</a>
    <a>#ipsum</a>
    <a>#lorem</a>
  </div>
</div>

Please correct my mistake.. thank you in advance

CodePudding user response：

If by media in onclick="socialMedia(media, 'Twitter')" you meant the clicked element, then it should be this. Then you can reference it like media.className in the function.

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 >
            <button  onclick="socialMedia(this, 'Twitter')">Twitter</button>
            <button  onclick="socialMedia(this, 'Facebook')">Facebook</button>
            <button  onclick="socialMedia(this, 'Instagram')">Instagram</button>
        </div>

        <div id="Twitter" >
            <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 >
                <a>#lorem</a>
                <a>#ipsum</a>
                <a>#lorem</a>
            </div>
        </div>
        <div id="Facebook"></div>
        <div id="Instagram"></div>