Das aufdecken von Informationen, die beim Klick auf einen button/text?

Ich habe eine Tabelle mit 'mehr sehen' geschrieben auf der Seite des Titels "Trainee-Versicherung.."

Möchte ich die Menschen in der Lage sein zu sehen, klicken Sie auf mehr und dann Informationen angezeigt, unter dem Titel

Wie mache ich das?

Dank!

James

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
</tr>
</table>

Als Sie entdeckt haben, gibt es zahlreiche Möglichkeiten, dies zu erreichen. Wenn Sie interessiert sind in einem der modernsten Techniken, die Sie wahrscheinlich wollen, um einen guten Griff auf, wie der DOM (document object model) arbeiten und schauen Sie sich eine javascript-Bibliothek namens jQuery (jquery.com). Mit auch grundlegende Kenntnisse von diesen Technologien, die Sie tun können, wirklich Super Sachen mit sehr wenig code.
Aktualisieren Sie Ihre HTML-21st century standards helfen, Ihre HTML-Entwicklung Erfahrung insgesamt. Die font - tag ist veraltet zusammen mit den color, face, und align Attribute in den HTML-Code. Tisch-layouts sind ebenfalls in der Regel verpönt. Ich empfehle die Abholung Dan Cederholm ist Bulletproof Web Design.

InformationsquelleAutor James | 2011-08-26

Möglicherweise gibt es andere Möglichkeiten -- non-JavaScript-Möglichkeiten-aber ich habe immer verwendet JavaScript, dies zu tun. Hinzufügen eines onclick handler der "see more" td, und in diesem handler, legen Sie die more element, um display:inline Stil, so etwas (ungetestet):

<script type="text/javascript">
function show_more ( element_to_show ) {
var element_to_show = getRefToDiv( element_to_show );
element_to_show.style.display = "inline";
}
</script>

<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font> 
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>, 
</tr>
</table>

Hallo! Vielen Dank für die Hilfe!
Ich habe den code eingegeben, sehe aber mehr ist nicht anklickbar was soll ich hinzufügen?
Sorry Weg zu sein. Erstens, stellen Sie sicher, dass JavaScript in Ihrem browser aktiviert ist. Auch, setzen Sie das <script> im <head> - Abschnitt Ihrer Seite.

InformationsquelleAutor Pete Wilson

3

Mit JQuery:

Geben IDs auf 'Mehr Sehen' - button und der Inhalt, der angezeigt werden soll:
```
$('#see_more').click( function() { $('#more_content').show(); });
```
InformationsquelleAutor cmpolis
2

Haben Sie einen schlimmen Fall von der 1990er Jahre HTML.

Hier ist in den 1990er Jahren Weg, es zu tun:
```
<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
<a href="javascript://" onclick="showThis('a1')">See More...</a>
```
JS:
```
function showThis(id) {
   document.getElementById(id).style.display='block'  
}
```
Ein paar Tipps:
- nicht verwenden Tabellen für das layout. Verwenden Sie HTML + CSS
- nicht verwenden, inline font-Anweisung, verwenden Sie CSS
- erkunden jQuery.
- Meinst du "Hier ist die 2000er Jahren Weg, es zu tun:"?
- Wie machst du eine Tabelle, die 2000 Weg?
- Nee, ich würd einfach jQuery verwenden, hook up alle meine event-Handler zur Laufzeit und nicht den Rückgriff der übergabe von IDs.
- Vergessen Sie das Semikolon am Ende der JavaScript-Anweisung.
InformationsquelleAutor Diodeus - James MacFarlane
0

Ich würde jQuery verwenden, um zu zeigen/verbergen Sie den block von text, wenn "Mehr Sehen...." geklickt wird.

http://api.jquery.com/show/

Natürlich, dies setzt Voraus, Sie sind bereits vertraut mit jQuery. Wenn Sie nicht sind, oder Sie können nicht/nicht es verwenden, wird eine schnelle Google-Suche zeigte http://www.cssnewbie.com/showhide-content-css-javascript/

InformationsquelleAutor Blazemonger
0

Display=none; im style und entfernen Sie es auf onclick-Ereignis.

InformationsquelleAutor Clement Bellot
0

Müssen Sie entweder; einen versteckten DIV, der erscheint, wenn Sie klicken Sie auf 'mehr sehen'. Was müssen Sie Javascript oder JQuery. ODER Haben einige PHP-generieren Sie eine andere Zeile in der Tabelle.

InformationsquelleAutor

Wenn Sie Daten laden möchten, in einer separaten Datei, die Sie verwenden müssen, AJAX. Wenn Sie zeigen wollen, ein element, das schon auf der Seite bei "Weitere" geklickt wird, können Sie reguläre javascript. Fügen Sie einfach eine neue Zeile in der Tabelle, geben Sie eine ID und verstecken Sie die Verwendung von inline-styles. Dann fügen Sie einen link um Ihr "mehr sehen" - text, und geben Sie einen onclick-handler, der zeigt das versteckte Zeile. Wie diese:

<table height="20" width="775" cellpadding="0" cellspacing="0">
    <tr>
        <td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
        <td align="right"><font face="lucidagrande" size="2" color="red"><a href="#" onclick="document.getElementById('showme').style.display = 'table-row'; return false;">See More...</a></font></td>
    </tr>
    <tr id="showme" style="display: none">
        <td colspan="2">More info appears here!!!</td>
    </tr>
</table>

InformationsquelleAutor Joe Landsman

<script language="javascript">
$(document).ready(function(){

$('#see_more').click(function(){
$("#more_text").show();
});

     $("#more_text").hide();
});

</script>




 <table height="20" width="775" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
 <td align="right" id="see_more">
 <font face="lucidagrande" size="2" color="red">See More...</font> 
 </td>
 </tr>

      <tr><td id="more_text">This is more text here......</td></tr>


 </table>

InformationsquelleAutor mithunsatheesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.