Question

我在点击链接时试图隐藏或显示div内容。我试过使用http://jsfiddle.net/fXE9p/中使用的相同方法并且仍然没有工作。

<body>
    Click a button to make it visible:<br /><br />
    <a href="#" class="one">One</a>
    <a href="#" class="two">Two</a>
    <a href="#" class="three">Three</a>
    <a href="#" class="four">Four</a><br /><br />

    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div><br/><br/>
</body>

$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
    //e.preventDefault();
    $("#" + $(this).attr("class")).show().siblings('div').hide();
});

我要做的是在网格块中放置一个链接，一旦点击它就会显示div的内容（内容包括表单字段）。因为网格不能正常工作吗？

这是我的代码 HTML：

<div role="main" class="ui-content">

            <fieldset>
                        <div class="ui-grid-a">
                            <div class="ui-block-a" id="conGridOne"><a href="#" class="linkA">Block A</a></div>
                            <div class="ui-block-b" id="conGridTwo"><a href="#contactTabTwo">block B</a></div>
                        </div>
            </fieldset>
                <div id="linkA">
                    <p>This is block one</p>
                </div>
                <div id="id2" class="tabContent" data-href="contactTabTwo">
                    <h1>this is block two</h1>            
                </div>        


    </div>

jquery的：

$("a.linkA").click(function(e){
    e.preventDefault();
    $("#" + $(this).attr("class")).show();
    });

CSS：

#linkA{

display: none;

}

是的，我已将jquery链接到我的html文档，如下所示：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Answer 1

简单只需为div分配一个具有display：block的类;并将div默认设置为display：none;

编辑：没有意识到您想要在点击其他div时隐藏其他div。 DIV { 显示：无; }

    </style>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  </head>
<body>
  <body>
Click a button to make it visible:<br /><br />
<a href="#" class="one">One</a>

<a href="#" class="two">Two</a>
<a href="#" class="three">Three</a>
<a href="#" class="four">Four</a><br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("a").click(function() {
 $("#"+this.className).siblings("div").hide();
  $("#"+this.className).show();
});
  </script>
</body>
</html>

修改 CodePen链接添加： http://codepen.io/DeveloperKnowledge/pen/KpPgbL

Answer 2

确保您拥有jQuery的脚本标记。我更喜欢将它们放在</body>标记之前。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

您可以在此处找到最新的jQuery CDN： http://jquery.com/download/

单击网格内的链接时隐藏并显示div内容

2 个答案: