Span with Onclick Event Inside a Tag
Sample Code Hide Me Since the a Tag Is over the Span Is Not Possible to Click It. I Try Z-Index but That Didnt Work 5 7 Answers Hide Me This Is the Easiest...
Sample code
<a href="page" style="text-decoration:none;display:block;">
<span onclick="hide()">Hide me</span>
</a>
Since the a tag is over the span is not possible to click it. I try z-index but that didnt work
7 Answers
<a href="">
<span onclick="hide(); return false">Hide me</span>
</a>
This is the easiest solution.
When you click on hide me, both a and span clicks are triggering. Since the page is redirecting to another, you cannot see the working of hide()
You can see this for more clarification
Fnd the answer.
I have use some styles inorder to achive this.
<span
class="pseudolink"
onclick="location='">
Go TO URL
</span>
.pseudolink {
color:blue;
text-decoration:underline;
cursor:pointer;
}
use onmouseup
try something like this
<html>
<head>
<script type="text/javascript">
function hide(){
document.getElementById('span_hide').style.display="none";
}
</script>
</head>
<body>
<a href="page" style="text-decoration:none;display:block;">
<span onmouseup="hide()" id="span_hide">Hide me</span>
</a>
</body>
</html>
EDIT:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
function hide(){
document.getElementById('span_hide').style.display="none";
}
</script>
</head>
<body>
<a href="page.html" style="text-decoration:none;display:block;" onclick="return false" >
<span onmouseup="hide()" id="span_hide">Hide me</span>
</a>
</body>
</html>
You don't have to use a tag to click it. onclick event already do this.
Just give an id to your span and hide it with javascript like this.
<span id="should_hide" onclick="hide()">Hide me</span>
<script>
function hide(){
document.getElementById("should_hide").style.display = 'none';
}
</script>
I would use jQuery to get the results that you're looking for. You wouldn't need to use an anchor tag at that point but if you did it would look like:
<a href="page" style="text-decoration:none;display:block;">
<span onclick="hide()">Hide me</span>
</a>
<script type='text/javascript' src=' /
<script type='text/javascript'>
$(document).ready(function(){
$('span').click(function(){
$(this).hide();
}
}
You could use jQuery
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
