Question

我有以下网站：http://karlstrup.dk.server15.exaweb.dk/boliger/（用户名和传递服务器15）我正在接受挑战。我有5个div，一个显示：none;在页面加载时的CSS中我有五个相应的链接。当用户点击link1时，我想显示div1并隐藏其他div。当用户点击link2时，我想以相同的方式显示div2并隐藏其他人，想要重复其他div的功能。

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

Answer 1

这是demo。

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

这似乎符合您的要求：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: