Heim > Web-Frontend > js-Tutorial > Hauptteil

Zwei Möglichkeiten zum Ein- und Ausblenden von Steuerelementen in js_javascript-Skills

WBOY
Freigeben: 2016-05-16 16:38:56
Original
1435 Leute haben es durchsucht

Es gibt zwei Möglichkeiten, Steuerelemente mithilfe von JavaScript auszublenden, nämlich durch Festlegen der Attribute „Anzeige“ und „Sichtbarkeit“ des Steuerelementstils.

Das Steuerelement ist sichtbar, wenn style.display="block" oder style.visibility="visible" ist, und unsichtbar, wenn style.display="none" oder style.visibility="hidden". Der Unterschied besteht darin, dass „Anzeige“ nicht nur das Steuerelement ausblendet, sondern auch, dass das ausgeblendete Steuerelement nicht mehr die Position einnimmt, die es bei der Anzeige einnimmt, während das durch „Sichtbarkeit“ ausgeblendete Steuerelement das Steuerelement nur auf unsichtbar setzt und das Steuerelement weiterhin seine ursprüngliche Position einnimmt Position.

function displayHideUI()
{
var ui =document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui =document.getElementById("bbs");
ui.style.display="";//display为空的话会好使,为block会使后边的空间换行
}
function visibilityHideUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="visible";
}
</script>
Nach dem Login kopieren

Wertbeschreibung
none Dieses Element wird nicht angezeigt.
Block Dieses Element wird als Element auf Blockebene mit Zeilenumbrüchen vor und nach diesem Element angezeigt.
Inline-Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt.
inline-block Inline-Blockelement. (Neuer Wert in CSS2.1)
Listenelement Dieses Element wird als Liste angezeigt.
run-in Dieses Element wird je nach Kontext als Element auf Blockebene oder als Inline-Element angezeigt.
kompakt Es gibt einen Wert „compact“ in CSS, der jedoch aus CSS2.1 entfernt wurde, da keine breite Unterstützung vorhanden ist.
marker Es gibt einen Wertmarker in CSS, der jedoch aus CSS2.1 entfernt wurde, da keine breite Unterstützung vorhanden ist.
Tabelle Dieses Element wird als Tabelle auf Blockebene (ähnlich wie

) mit Zeilenumbrüchen vor und nach der Tabelle angezeigt.
inline-table Dieses Element wird als Inline-Tabelle (ähnlich wie
) ohne Zeilenumbrüche vor und nach der Tabelle angezeigt.
table-row-group Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie ).
table-header-group Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie ).
table-footer-group Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie ).
table-row Dieses Element wird als Tabellenzeile angezeigt (ähnlich wie ).
table-column-group Dieses Element wird als Gruppe aus einer oder mehreren Spalten angezeigt (ähnlich wie ).
Tabellenspalte Dieses Element wird als Zellenspalte angezeigt (ähnlich wie )
table-cell Dieses Element wird als Tabellenzelle angezeigt (ähnlich wie
und )
table-caption Dieses Element wird als Tabellentitel angezeigt (ähnlich wie
)
inherit gibt an, dass der Wert des Anzeigeattributs vom übergeordneten Element geerbt werden soll.

Das heute gelöste Problem besteht darin, der durch CSS definierten Klasse label.error eine ID auf der JSP-Seite zu geben und dann die Sichtbarkeit der ID zu steuern, um die Js-Eingabeaufforderungsinformationen zu löschen, wenn das Div reduziert wird. Die Details sind wie folgt:
In der Funktion zur Vorbereitung der Schnittstelle var label1 = document.getElementById("label1");

$(document).ready(function() {
$(".flipp .span4").click(function() {
$(this).parent().next().toggle();
$(this).parent().parent().prevAll().find(".panel").hide();
$(this).parent().parent().nextAll().find(".panel").hide();
var label1 = document.getElementById("label1");
label1.style.display="none";
})
Nach dem Login kopieren

Dann fügen Sie die entsprechende Stelle in JSP ein:

<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>
Nach dem Login kopieren

Für die von CSS definierte Klasse label.error können Sie $("label.error").removeAttr("style").attr("style", "display: none;"); verwenden Funktion. Darüber hinaus scheint es nicht erforderlich zu sein, den ID-Wert für das Etikett an der entsprechenden Stelle im Untergrund zu definieren.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage