jquery隐藏一个div，显示另一个-Java 学习之路

-5

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

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

4 回答

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

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

回复于 2024-04-30T20:56:27+08:00

0
在每个按钮上单击隐藏所有选项卡，然后显示所需的选项卡 . 见下面的代码 .
```
$(".uk-button").click(function(){
  $(".uk-panel").hide();
  var id = $(this).data("uk-toggle");
  $(id.target).show();
});
```
希望能帮助到你 .
回复于 2024-04-30T20:56:27+08:00

在一个工作示例下方，您可以根据自己的需要随意更改 .

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

每当您点击链接时隐藏所有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>

回复于 2024-04-30T20:56:27+08:00

这似乎做你所要求的：

$('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>

回复于 2024-04-30T20:56:27+08:00

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

4 回答

相关问题