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

Question

我只想通过onclick事件调用一个函数来显示特定的div。一次，我只想显示一个div，其余所有div都不应显示在我的网页中。 我已经通过使用display 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>

Answer 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的引用才能使$语法起作用。

Answer 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>

Answer 3

我认为这是您想要的：

<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();
    });
}

同时编辑，如果你不想依靠刚性的命名方案，你可以使用哈希。

<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();
    });   
});

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

问题描述

3 个解决方案

解决方案1
1 2015-07-15 21:41:47

解决方案2
0 2015-07-15 20:22:06

解决方案3
0 2015-07-15 20:59:50

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

问题描述

3 个解决方案

解决方案1 1 2015-07-15 21:41:47

解决方案2 0 2015-07-15 20:22:06

解决方案3 0 2015-07-15 20:59:50

解决方案1
1 2015-07-15 21:41:47

解决方案2
0 2015-07-15 20:22:06

解决方案3
0 2015-07-15 20:59:50