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

【问题标题】：jquery hide one div, show anotherjquery隐藏一个div，显示另一个
【发布时间】：2015-10-30 07:24:01
【问题描述】：

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

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

【问题讨论】：

什么是联合国和通行证？
为什么不在这里发布您的代码？大多数 SO 用户不会访问未知网站。另外，如果有一天你网站上的代码发生了变化，那么你的问题就没有意义了。
用户名和密码是 server15（已经提到）
@Shehryar 这不是重点。您必须在自己的代码示例中概括您的问题，否则没有人能够帮助您。这就像说“这辆车上的这个螺丝必须被拧上。”哪个螺丝，哪个车，你试过什么？
代码有两个长.. 但我创建了五个 div 来从中获取灵感..
单击以向下或向上滑动面板

Hello world!

点击向下或向上滑动面板

Hello world!

点击向下或向上滑动面板

Hello world！

点击向下或向上滑动面板

Hello world!

点击向下或向上滑动面板

Hello world!

标签： javascript jquery css

【解决方案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>

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

【讨论】：

以上只是一个例子，你可以随意改变它！
是的 Deepak Biswal 类似的东西，但我想在链接 1 项下显示链接 1 的内容（文本）并在链接 2 项下显示链接两个内容..
您可以使用 CSS 和 HTML 将链接内容放在链接下方！

【解决方案2】：

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

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

希望对你有帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

是的，这就是我想要的……但是在 wordpress 中粘贴代码后，它会产生错误（控制台）。并且代码在 wordpress 中不起作用，但在简单的 html 中可以正常工作。