2013-10-11 12 views
8

Ich habe eine fiddle mit einer Tabelle eingerichtet.Ein TD klickbar machen

Sie sehen, ich versuche, eine Tabelle zu machen, wo der Benutzer schwebt und klicken Sie auf die td, um eine ID anzuzeigen. Überprüfe die Geige und du wirst es verstehen.

Jetzt

, Wenn der Benutzer Parent4 schwebt, können Sie feststellen Platz auf dem Tisch dort ist, wo es gibt keinen Text, und der Benutzer kann es nicht klicken, um der Child4 gewohnt erscheinen ....

Nun gibt es ein Wie kann ich den Platz schaffen, an dem kein Text anklickbar ist, so dass es child4 anzeigt?

Ich versuchte

<td ahref="#child4"> but didn't work... 

////? EDIT Da es ein wenig verwirrend ...

Ich brauche Sie die Geige zu sehen. Sie können sehen, dass die Zelle für Parent4 größer als der Text ist. Also, wenn der Benutzer auf der Zelle schwebt, ich möchte den Text ändern Farbe und die Zelle, um die Farbe zu ändern, + wenn der Benutzer auf die Zelle Child4 klicken wird nicht angezeigt, weil eine Zelle ist nicht anklickbar, so meine Frage, wie kann ich die Zelle klickbar, um Child4 anzuzeigen?

UPD:

Ich habe nicht die Geige aktualisieren, aber es ist jetzt auf dem neuesten Stand.

+1

Die Geige hat keine 4s –

+0

@ExplosionPills was meinst du mit 4s? – user2766367

+0

Er meint 4 in deiner Frage, du meintest child4, aber in deiner Geige gibt es keine td mit dem Code, den du in deiner Frage angegeben hast – Kierchon

Antwort

14

Die href-Eigenschaft ist für anchor elements (<a/>) ausgelegt. "ahref", wie Sie gesagt haben, sollte <a href=""> sein. a ist ein eigenes Element, kein HTML-Attribut, und href ist ein Attribut, das akzeptiert wird.

Um den Text eines td klickbare machen Sie einfach einen Anker innerhalb setzen können:

<td> 
    <a href="#child4">My clickable text</a> 
</td> 

Edit: dies jetzt zu beheben, dass die Frage hinzugefügt wurde, einfach in der folgenden CSS hinzufügen:

td a { 
    display:block; 
    width:100%; 
} 

Was das bedeutet ist den Anker-Tag als Block angezeigt werden, so dass wir die Breite, einzustellen, und dann die Breite auf 100% gesetzt, so dass es den verbleibenden Raum zu füllen.

Working JSFiddle.

+0

Ich weiß nicht, ob du die Geige überhaupt siehst ... Parent1 user2766367

+0

Ich habe deine Geige gesehen, aber sie stimmt nicht mit dem in deiner Frage verwendeten Code überein (was ein wenig verwirrend ist). Der Code in deiner Geige scheint tatsächlich zu funktionieren. –

+0

Ok, ich habe meine Frage aktualisiert, damit sie verständlicher wird. – user2766367

10

Fügen Sie das onClick-Ereignis auf dem td-Zeichen hinzu.

<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td> 
+1

Bitte beziehen Sie sich auf die Geige? Ich habe versucht, Aber hat nicht funktioniert ... – user2766367

0

Wenn Sie versuchen, einen Bereich klickbare ohne Text zu machen, können Sie die Größe des Tags wie so definieren:

<a href='#child4' class="parent" style="display: block;width: 300px;height: 10px;"></a> 

Dadurch wird der Block ohne Objekt oder Text innerhalb erstellen .

-1

einfachste Sache wäre, die „leere“ Zelle zu füllen mit:

&nbsp; 

, die den Trick für Sie tun sollten.

+0

Wie kann ich dies anwenden? – user2766367

+1

  LuFaMa

+0

Sie könnten auch Display: Block; von einem href. – Cam

6

Es gibt eine sehr einfache Möglichkeit, dies mit nur HTML zu tun.Fügen Sie den Linktext in ein DIV ein. Der DIV belegt das gesamte TD und macht alles klickbar.

<a href="http://whatever.com"> 
    <div> 
    Link Text 
    </div> 
</a> 
Verwandte Themen