單擊網格內的鏈接時隱藏並顯示div內容
[英]hide and show div content when clicking link inside grid
問題描述
單擊鏈接時，我試圖隱藏或顯示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>
2 個解決方案
解決方案1
0 2015-04-17 18:09:24
簡單的只需為div分配一個具有display：block;的類即可。 並將div默認設置為display：none;
編輯：沒有意識到您要在單擊另一個div時隱藏其他div。 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鏈接已添加： http ://codepen.io/DeveloperKnowledge/pen/KpPgbL
解決方案2
0 2015-04-17 18:14:52
確保您具有jQuery的腳本標簽。 我更喜歡將它們放在</body>標記之前。
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
您可以在這里找到最新的jQuery CDN： http ： //jquery.com/download/
單擊表格單元格內的鏈接時顯示div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.