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

Question

I want to show only a particular div by calling a function though onclick event .At a time I just want to show a single div and rest all divs should not show in my web page. 我只想通过onclick事件调用一个函数来显示特定的div。一次，我只想显示一个div，其余所有div都不应显示在我的网页中。 I have tried this through using display css property.I just want a single function which can handle this .I can do this question by making more than one function. 我已经通过使用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

How about this: 这个怎么样：

Each div needs the same class so you can find and hide them all at once. 每个div需要一个相同的类，因此您可以一次查找并隐藏它们。
The function needs to know the id of the div to show, so pass in the id. 该函数需要知道要显示的div的ID，因此请传递ID。

See changes below: 请参阅以下更改：

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

Note: You need a reference to jQuery for the $ syntax to work. 注意：您需要对jQuery的引用才能使$语法起作用。

Answer 2

FYI, you could do this with just CSS: 仅供参考，您可以使用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

I think this is what you want: 我认为这是您想要的：

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

Edit Also, if you did not want to rely on a rigid naming scheme, you could 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();
    });   
});

在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