サンプルコード
<a href="page" style="text-decoration:none;display:block;">
<span onclick="hide()">Hide me</span>
</a>
タグがスパンを超えているため、クリックすることはできません。z-indexを試してみましたが、うまくいきませんでした
をクリックすると、 aとスパンhide me
の両方のクリックがトリガーされます。ページが別のページにリダイレクトされているため、hide()
より明確にするためにこれを見ることができます
答えを見つけてください。
これを実現するために、いくつかのスタイルを使用しました。
<span
class="pseudolink"
onclick="location='https://jsfiddle.net/'">
Go TO URL
</span>
.pseudolink {
color:blue;
text-decoration:underline;
cursor:pointer;
}
onmouseupを使用する
このようなことを試してください
<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>
編集:
<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>
jQuery を使用して、探している結果を取得します。その時点でアンカー タグを使用する必要はありませんが、使用すると次のようになります。
<a href="page" style="text-decoration:none;display:block;">
<span onclick="hide()">Hide me</span>
</a>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js' /
<script type='text/javascript'>
$(document).ready(function(){
$('span').click(function(){
$(this).hide();
}
}
jQueryを使用できます