HTML Divs显示/隐藏问题 [英] HTML Divs show/hide issue
问题描述
朋友，我在div上遇到问题. 点击页面后，我的页面上有一个显示/隐藏潜水链接，我必须显示或隐藏特定的div. 我做得很成功. 但是我的问题是，每当我单击该链接div时，它都会被隐藏或显示，而页面直接位于顶部&我必须再次向下滚动. 我不想滚动它，也不想爬到顶部.
Hi friends I have issue with divs. I have a link show/hide dive on my page on clicking which i have to show or hide specific divs. I am successful with doing it. But my issue is that whenever I click on that link div is get hide or shown but page get directly on the top & I have to scroll to down again. I don't want to scroll this and don't want to get to top.
请帮助我. 预先谢谢你.
Please help me out with this. Thank You in advance.
更新: 朋友我从一个朋友那里得到了答案. 其实我在用 由于href =#"，因此每次我单击该链接时，URL都会更改，并且页面也到达顶部.
Update: Friend I got the answer from one of my friend. Actually I was using Because of href="#" URL get changed and page got to top every time I click on that link.
推荐答案
您要这样做吗?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<div id="container">
</div><!-- end of #container div -->
<a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>
</div><!-- end of #wrapper div -->
</body>
</html>
这是CSS:
#container {
width: 300px;
height: 300px;
background: red;
margin-bottom: 20px;
}
#wrapper {
margin: 40px auto;
width: 400px;
}
这是jQuery
$(function() {// When document is ready, run this...
//Get hold of the link with the id #showdiv and do something when you click it
$("#showdiv").click(function() {
// Grab the div with the id #container and show it
// Alert me when you're done
$("#container").show(2000, function() {
alert("I'm done showing");
});
});
//Get hold of the link with the id #hideDiv and do something when you click it
$("#hideDiv").click(function() {
// Grab the div with the id #container and hide it
// Alert me when you're done
$("#container").hide(2000, function() {
alert("I'm done hiding");
});
});
// Toggle - This is like a On/Off Switch
//Get hold of the link with the id #toggle and do something when you click it
$("#toggle").click(function() {
// Grab the div with the id #container and show if hidden / hide if shown
$("#container").toggle(2000);
});
});
当然，在使用上面的脚本之前，您必须链接到jQuery的副本. 这是演示的链接: http://jsfiddle.net/tonystark/HhNBA/
Of course you'd have to link to a copy of jQuery before using the script above. Here's a link to a demo: http://jsfiddle.net/tonystark/HhNBA/
这篇关于HTML Divs显示/隐藏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
