在 html 页面上动态显示特定的 div答案

【问题标题】：showing a particular div dynamically on a html page在 html 页面上动态显示特定的 div
【发布时间】：2015-07-16 06:20:49
【问题描述】：

我想通过 onclick 事件调用一个函数来只显示一个特定的 div。一次我只想显示一个 div 而其余的所有 div 都不应该显示在我的网页中。我已经通过使用显示 css 属性进行了尝试。我只想要一个可以处理这个问题的函数。我可以通过创建多个函数来解决这个问题。

<html>
  <head>
    </head>
  <body>
    <ul>
     <li><a href="#" onclick="someFunction();">1</a></li><!-- show div1-->
      <li><a href="#" onclick="someFunction();">2</a></li><!-- show div2-->
      <li><a href="#" onclick="someFunction();">3</a></li><!-- show div3-->
      
    </ul>
    <div id="first">content 1</div>
    <div id="second">content2</div>
    <div id="third">content3</div>
    </body>
  </html>

【问题讨论】：

你写了什么函数
以下解决方案之一是否适合您？

标签： javascript html

【解决方案1】：

这个怎么样：

每个 div 都需要相同的类，这样您就可以一次找到并隐藏它们。
函数需要知道要显示的div的id，所以传入id。

查看以下更改：

<html>
  <head>
  </head>
  <body>
    <ul id="controls">
      <li><a href="#" data-target="first">1</a></li><!-- show div1-->
      <li><a href="#" data-target="second">2</a></li><!-- show div2-->
      <li><a href="#" data-target="third">3</a></li><!-- show div3-->
    </ul>

    <div id="first" class="content">content 1</div>
    <div id="second" class="content">content2</div>
    <div id="third" class="content">content3</div>

    <script>
        $("#controls a").click(function() {
            someFunction($(this).attr("data-target"));
        });
        function someFunction(divId) {
            $(".content").hide();
            $("#" + divId).show();
        }   
    </script>
  </body>
</html>

注意：您需要参考 jQuery 才能使 $ 语法起作用。

【讨论】：

我喜欢你的解决方案。优雅的。除了——最近有人说我们应该再混合使用 javascript 和 html。创建一个接受内容 div id 的函数是个好主意。
不错。我们的解决方案实际上非常相似。

【解决方案2】：

仅供参考，您只需使用 CSS 即可：

.panel {display: none}
.panel:target {display: block}

<ul>
    <li><a href="#first">1</a></li>
    <li><a href="#second">2</a></li>
    <li><a href="#third">3</a></li>
</ul>
<div class='panel' id="first">content 1</div>
<div class='panel' id="second">content2</div>
<div class='panel' id="third">content3</div>

【讨论】：

聪明，但 OP 确实说他们想要一个功能。
如果无序列表和内容 div 位于不同的 div 中，则上述方法不起作用。请问在这种情况下如何使用 css 属性更改内容

【解决方案3】：

我认为this 是你想要的：

<ul>
    <li id="li_1"><a href="#first">1</a>
    </li>
    <li id="li_2"><a href="#second">2</a>
    </li>
    <li id="li_3"><a href="#third">3</a>
    </li>
</ul>
<div class='panel' id="li_1_panel">content 1</div>
<div class='panel' id="li_2_panel">content2</div>
<div class='panel' id="li_3_panel">content3</div>

.panel {
    display: none;
}

var panelID = "";
for (i = 1; i <= 3; i++) {
    alert('#li_' + i);
    $('#li_' + i).on('click', function () {
        panelID = "#" + $(this).attr("id") + "_panel";
        alert(panelID);
        $(panelID).toggle();
    });
}

编辑此外，如果您不想依赖严格的命名方案，您可以use a hash。

<ul>
    <li id="zeus"><a href="#first">1</a>
    </li>
    <li id="athena"><a href="#second">2</a>
    </li>
    <li id="hades"><a href="#third">3</a>
    </li>
</ul>
<div class='panel' id="isis">content 1</div>
<div class='panel' id="thor">content 2</div>
<div class='panel' id="aphrodite">content 3</div>

var panelID = "";
var li_to_panel = {
    "zeus": "isis",
    "athena": "thor",
    "hades": "aphrodite"
};

$.each(li_to_panel, function(key, value){
    alert(key);
    liID = "#" + key;
    $(liID).on('click', function () {
        panelID = "#" + li_to_panel[$(this).attr('id')];
        alert(panelID);
        $(panelID).toggle();
    });   
});

【讨论】：