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

Question

I'm trying to hide or show div content when clicking on link. 单击链接时，我试图隐藏或显示div内容。 I have tried to use the same approach used in http://jsfiddle.net/fXE9p/ and still didn't work. 我尝试使用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();
});

What I'm trying to do is place a link in grid block, and once it's clicked the content of div will be displayed (the content including form fields). 我想做的是在网格块中放置一个链接，单击该链接后，将显示div的内容（包括表单字段的内容）。 Is it not working because of the grid? 由于电网不正常吗？

this is my code html: 这是我的代码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: jQuery的：

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

CSS: CSS：

#linkA{

display: none;

} }

and yes i have linked jquery to my html document as follows: 是的，我已经将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

simple just assign the div a class that has display: block; 简单的只需为div分配一个具有display：block;的类即可。 and set the div by default to display:none; 并将div默认设置为display：none;

EDIT: didn't realize that you wanted to hide the other divs when one was clicked. 编辑：没有意识到您要在单击另一个div时隐藏其他div。 div{ display:none; div {display：none; } }

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

EDIT CodePen Link added: http://codepen.io/DeveloperKnowledge/pen/KpPgbL EDIT CodePen链接已添加： http ://codepen.io/DeveloperKnowledge/pen/KpPgbL

Answer 2

Make sure you have your Script tags for jQuery . 确保您具有jQuery的脚本标签。 I prefer to put them just before the </body> tag. 我更喜欢将它们放在</body>标记之前。

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

You can find the latest jQuery CDN here: http://jquery.com/download/ 您可以在这里找到最新的jQuery CDN： http ： //jquery.com/download/

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

问题描述

2 个解决方案

解决方案1
0 2015-04-17 18:09:24

解决方案2
0 2015-04-17 18:14:52

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

问题描述

2 个解决方案

解决方案1 0 2015-04-17 18:09:24

解决方案2 0 2015-04-17 18:14:52

解决方案1
0 2015-04-17 18:09:24

解决方案2
0 2015-04-17 18:14:52