jquery隐藏一个div，显示另一个

Question

我有以下网站： http ://karlstrup.dk.server15.exaweb.dk/boliger/（用户名并通过 server15）我遇到了挑战。 我有 5 个 div，一组显示：无； 在页面加载时的 css 中，我有五个相应的链接。 当用户单击 link1 时，我想显示 div1 并隐藏其他 div。 当用户单击 link2 时，我想以相同的方式显示 div2 并隐藏其他 div，想要重复其他 div 的功能。

我一直无法让这个工作！ 非常感谢任何帮助。

Answer 1

这是一个演示。

HTML

<div class="links">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
    </ul>
</div>

<div class="tabs">
    <div id="1">Link 1 contents</div>
    <div id="2" class="inactive">Link 2 contents</div>
    <div id="3" class="inactive">Link 3 contents</div>
    <div id="4" class="inactive">Link 4 contents</div>
    <div id="5" class="inactive">Link 5 contents</div>
</div>

JS

$(function() {
    $('.links').find('li').each(function(index) {
        $(this).on("click", function(){
            var link = $(this).html(); 
            var linksObj = link.split(" ");
            $('.tabs').find('div').hide();
            $('#' + linksObj[1]).show();
        });
    });

});

CSS

.inactive {
    display: none;
}

Answer 2

在每个按钮上单击隐藏所有选项卡，然后显示所需的选项卡。 请参阅下面的代码。

$(".uk-button").click(function(){
  $(".uk-panel").hide();
  var id = $(this).data("uk-toggle");
  $(id.target).show();
});

希望能帮助到你。

Answer 3

下面是一个工作示例，请随时根据您的需要进行相应更改。

基本上你可以通过这种方式解决你的要求：

每当您单击链接时隐藏所有 div
并显示链接到单击链接的 div

您使用style.display来设置 div 的可见性。

请注意：解决方案是使用 vanilla JS 完成的，此解决方案中不需要 jquery 或其他库。

实例： https : //jsbin.com/betecegoro/edit?html,output

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        .panel {
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        (function (window) {
            window.app = {
                items: [0,1,2,3],
                start: function () {
                    this.addListeners();
                    this.hidePanels();

                },
                hidePanels: function () {
                    this.items.forEach(function (item) {
                        var elm = document.getElementById('panel-' + item);
                        elm.style.display = 'none';
                    });
                },
                showPanel: function (id) {
                    var elm = document.getElementById('panel-' + id);
                    elm.style.display = '';
                },
                addListeners: function () {
                    this.items.forEach(function (item) {
                        var elm = document.getElementById('link-' + item);
                        elm.addEventListener('click', function (event) {
                            this.hidePanels();
                            var id = elm.id.split('-')[1];
                            this.showPanel(id);
                        }.bind(this))
                    },this);
                }
            };

        })(window);

    </script>
</head>
<body onload="window.app.start();">
    <div>
        <a id="link-0" href="#">Show Panel 0 and hide others</a>
    </div>
    <div>
        <a id="link-1" href="#">Show Panel 1 and hide others</a>
    </div>
    <div>
        <a id="link-2" href="#">Show Panel 2 and hide others</a>
    </div>
    <div>
        <a id="link-3" href="#">Show Panel 4 and hide others</a>
    </div>
    <div id="panel-0" class="panel">Content Panel 0</div>
    <div id="panel-1" class="panel">Content Panel 1</div>
    <div id="panel-2" class="panel">Content Panel 2</div>
    <div id="panel-3" class="panel">Content Panel 3</div>

</body>
</html>

Answer 4

这似乎可以满足您的要求：

 $('div[id^=flip]').click(function() { $('div[id^=panel]').hide(); $(this).next('div[id^=panel]').show('slow'); });

 div[id^=flip] { height: 25px; } div[id^=panel] { height: 50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> <div id="flip2">Click to slide the panel down or up</div> <div id="panel2">Hello world!</div> <div id="flip3">Click to slide the panel down or up</div> <div id="panel3">Hello world!</div> <div id="flip4">Click to slide the panel down or up</div> <div id="panel4">Hello world!</div> <div id="flip5">Click to slide the panel down or up</div> <div id="panel5">Hello world!</div>

jquery隐藏一个div，显示另一个

问题描述

4 个解决方案

解决方案1
0 2015-10-30 07:41:25

解决方案2
0 2015-10-30 07:50:50

解决方案3
0 2015-10-30 07:58:06

解决方案4
0 2015-10-30 08:04:55

jquery隐藏一个div，显示另一个

问题描述

4 个解决方案

解决方案1 0 2015-10-30 07:41:25

解决方案2 0 2015-10-30 07:50:50

解决方案3 0 2015-10-30 07:58:06

解决方案4 0 2015-10-30 08:04:55

解决方案1
0 2015-10-30 07:41:25

解决方案2
0 2015-10-30 07:50:50

解决方案3
0 2015-10-30 07:58:06

解决方案4
0 2015-10-30 08:04:55