私はdivを持っています。あなたがそれをクリックするとどこかにリンクしたいのですが、その中に他のリンクを入れたいので、他のリンクをクリックすると1つの場所にリダイレクトされますが、他の場所をクリックするとどこかにリダイレクトされますelse。divをリンク全体にすることはできますが、内部には他のリンクもありますか？
ここに簡単な例があります。それは、私が何をしていても、「内部」リンクは「外部」リンクの外側にあります。
<a href="#" class="exterior">
<a href="#">interior</a>
</a>
フィドル：https://jsfiddle.net/p4ugexf4/
あなたがリンク（複数可）の親要素でJavaScript onclickイベントを使用することができます。私はお勧めしません
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}<div onclick="document.location.href='https://example.com';return true;" class="exterior">
<a href="https://stackoverflow.com">interior</a>
</div><a>を<a>要素に使用します。 <a>を<a>に使用すると、無効です。あなたはW3C validatorに、次の書類を確認することができます。
<a>要素（ジャバスクリプトを使用せず - のみCSSソリューション）を使用することができます
<!DOCTYPE html>
<html>
<head>
<title>test link in link</title>
</head>
<body>
<a href="#" class="test1">
<a href="#" class="test2">test</a>
</a>
</body>
</html>
：
div {
position:relative;
border:1px solid red;
height:200px;
width:200px;
}
div a.ext {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:0;
}
div a.int {
position:relative;
z-index:999;
}<div>
<a class="ext" href="https://example.com"></a>
<a class="int" href="https://stackoverflow.com">test</a>
</div>私は 'return false'は' return true'でなければならないと思います。 –
シンプルで実用的なjavascript以外のソリューション：
は、小さな塊にあなたのメインリンクを分割- のようなもの：
<div>
<a href="#" class="exterior">First part of exterior link</a>
<a href="#">interior</a>
<a href="#" class="exterior">Second part of exterior link etc</a>
</div>
をあなたが要素の上に私が停止伝播を使用
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
position: relative;
}
.interior {
position: absolute;
top: 20px;
left: 20px;
}<a href="bla" class="exterior">
<a class="interior" href="blabla">Interior</a>
</a>'a'要素をネストすることはできません。この 'HTML'は無効です。 –
$(".exterior a").click(function(e){
alert('a clicked but div not triggered');
e.stopPropagation();
});
$(".exterior").click(function(e){
alert("div clicked but not a");
})
<div href = "#" class="exterior">
<a href="https://stackoverflow.com/questions/tagged/css">interior</a>
</div>
.exterior{
width: 500px;
height: 100px;
background-color: red;
}
絶対位置を使用することができますdivのクリックを引き起こさないようにします。そしてdivをラッパーとして使用したので、click関数内のURLにリダイレクトしたい場合はwindows.locationを置く必要がありました。
私は単純にhtmlとcssでこれを達成する方法がわかりません。だからjqueryを使用することをお勧めします。
.exterior {
display: block;
width:100px;
height:100px;
border: 1px black solid;
}<a href="http://bing.com" class="exterior">
<object><a href="http://example.com">Interior</a></object>
</a>あなたはanoterリンク/コンテナ内のリンクを表示する位置を使用することができます。
私は例を作成しましたが、それは完璧ではありませんが、あなたにアイデアを与えるでしょう。
https://codepen.io/MartynMc/pen/gRyqXL
HTML：
<div class="container">
<a class="link1" href="link1.com"></a>
<a class="link2" href="link2.com">link2</a>
</div>
CSS：
.container {
width: 250px;
height: 250px;
border: 2px solid;
position: relative;
}
.link1 {
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.link2 {
display: block;
top: 75px;
left: 50px;
font-size: 24pt;
position: absolute;
width: 150px;
height: 50px;
border: 2px solid red;
text-align: center;
line-height: 50px;
}
なぜあなたはリンク内のリンクを置きたいですか？確かにそれは良い考えではありません。あなたはそれがどのように機能すると思いますか？ – error404
@AnamulHasanあなたが内部のリンクをクリックすると、そのリンクに移動します。他の場所をクリックすると他の場所に移動します。 –
この質問にはjavascriptタグはありません。 JavaScriptのソリューションが欲しいですか？ – Danield