HTML <DIV>使用JavaScript隐藏/显示

debugcn 发表于 Dev

无魂的雷克

我在单个页面上有两个嵌入代码/部分。我想要的是使“社交媒体”徽标可单击，然后将看到相应嵌入式社交媒体的嵌入，而另一个隐藏。我只用一节就可以做到这一点，但是代码都是html。问题是Twitter嵌入的嵌入部分中间有一个部分，当我用旧方法进行操作时，它会使输出混乱。

这是我最常使用的旧代码（减去嵌入后无法正确显示）

    <body onload="updateForm(media)">
        <label>
            <input type="image" src="\CST-WebPage\media files\social media\youtube.png" alt="YouTube" style="width:100px" name="media" value="ty" onclick="updateForm(this)">
        </label>
        <label>
            <input type="image" src="\CST-WebPage\media files\social media\twitter.png" alt="Twitter" style="width:100px" name="media" value="tw" onclick="updateForm(this)">
        </label>
        <div id="SM"></div>
    </body>

function updateForm(control) {
  if (control.value == "tw") {
  document.getElementById("SM").innerHTML = twitter;
    }
    else {
  document.getElementById("SM").innerHTML = youtube;
    }
}

var youtube = '<div>\
            <iframe src="https://www.youtube.com/embed/videoseries?list=PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e" width="600" height="400"allowfullscreen scrollable="yes"></iframe>\
      <p id="success"></p>\
</div>';

var twitter = '<div>\
    <a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>\
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\
    </div>';

相反，具有<div id='SM'></div>我想，这会更容易使其<div id='youtube'>与<div id='twitter'>

在此先感谢您提供的任何帮助或见解。

雷尼埃·阿尔贝托·里韦罗·阿拉尔孔

您可以将hidden属性设置或删除ID为twitter或的元素youtube。

function updateForm(control) {
  if (control.value == "tw") {
     document.getElementById("twitter").removeAttribute('hidden');
     document.getElementById("youtube").setAttribute('hidden', true);
  } else {
     document.getElementById("youtube").removeAttribute('hidden');
     document.getElementById("twitter").setAttribute('hidden', true);
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。