3

これは間違いなくばかげたエラーですが、私はそれを見つけようと夢中になっています。次のカレンダーのコードでは、イベントがある場合のリンクと今日のリンクはクリックできません。

ハイパーリンクを www.google.com に置き換えたことに注意してください。実際のアプリでは、カレンダーの毎日のビューを指します。

誰かがエラーを見つけることができれば、非常に感謝しています。ありがとうございました。

2、3、4、および 7 のリンクは機能しますが、5、6、および 8 のリンクは機能しません。

jsfiddle はこちらです。

フィドルと同じコードは次のとおりです。

CSS:

div.event {
    position:relative; 
    vertical-aligh:top;
    z-index:3; 
    top:25px;
    text-width: 70px;
}
a.event {
    position:relative; 
    vertical-align:top;
    z-index:3; 
//  top:-15px;
    text-width: 70px;
}
a.day-number  {
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;    
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
    float:right;
}
a.theday-number  {
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;    
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
    float:right;
    background-color:red; 
}

HTML:

<table>
    <tr class="calendar-row"><td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">2</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
        <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">3</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
        <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">4</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
        <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">5</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1438">drinks</a></div></span></td>
            <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="theday-number">6</a><div class="event"><a href="eventdetail.php?id=1441">Test</a></div></span></td>
            <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">7</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
            <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">8</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1419">party</a></div></span></td>
</tr>
        </table>
4

8 に答える 8

6

<p>とタグ<div>を<span>

<p>and<div>はブロックレベル要素であり、a<span>はインライン要素であり、インライン要素内にブロック要素を含めることはできません。

于 2013-06-06T13:20:29.423 に答える
6

と リンクを一緒に使用する場合position:absolute;、z-index に問題があります。リンクを機能させるには、高い z-index 値を追加します。たとえば、

z-index:9999999;
于 2017-10-20T10:52:57.587 に答える
0

<span></span>内に配置したタグを削除すると、リンクをクリックできることがわかります<td></td>。<td>を使用する代わりに、スタイルを内部に追加することをお勧めします<span>。

試す。それはうまくいくかもしれません:)

于 2013-06-06T12:39:45.677 に答える
0

スパン内の div の代わりに、他の html 要素を使用します。これが問題のようです。これらの div を削除すると、要素はクリック可能になります。

于 2013-06-06T12:24:46.627 に答える
0

タグを削除するか、<p>タグに css(display: inline-block) を提供できます<p>。

于 2017-10-20T11:50:40.903 に答える
-1

Please remove the span wrap inside td. And Yes! correct your css.

<style>
    div.event {
    position:relative; 
    vertical-align:top;
    z-index:3; 
    top:25px;
    width: 70px;
}
a.event {
    position:relative; 
    vertical-align:top;
    z-index:3; 
//  top:-15px;
    width: 70px;
}
a.day-number  {
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;    
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
    float:right;
}
a.theday-number  {
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;    
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
    float:right;
    background-color:red; 
}

</style>
于 2013-06-06T12:32:04.367 に答える