tunjukkan hide javascript

Tajuk: Kuasai kemahiran bahagian hadapan dengan menunjukkan dan menyembunyikan Javascript

Dalam pembangunan bahagian hadapan, menunjukkan dan menyembunyikan ialah fungsi yang kerap digunakan. Sebagai contoh, kita selalunya perlu menunjukkan atau menyembunyikan beberapa elemen dalam keadaan tertentu untuk mencapai kesan interaktif atau mengoptimumkan pengalaman halaman. Artikel ini akan memperkenalkan kaedah pelaksanaan untuk memaparkan dan menyembunyikan kod Javascript untuk menguasai kemahiran bahagian hadapan.

1. Paparkan dan sembunyikan melalui CSS

Kaedah pelaksanaan paling mudah ialah memaparkan dan menyembunyikan elemen melalui atribut paparan CSS.

Apabila elemen perlu dipaparkan, tetapkan nilai atribut paparannya kepada sekat atau sekatan sebaris:

display: block | inline-block;

Apabila elemen perlu disembunyikan, tetapkan nilai atribut paparannya kepada tiada:

display: none;

Tetapi pendekatan ini mengorbankan sedikit fleksibiliti. Jika kita hanya mahu mengawal ketelusan atau kedudukan elemen tanpa menyembunyikannya sepenuhnya, maka kaedah ini nampaknya agak tidak mencukupi.

2. Paparkan dan sembunyikan melalui jQuery

Rangka kerja jQuery menyediakan kaedah khusus untuk paparan dan penyembunyian. Melalui kaedah fadeIn() dan fadeOut() jQuery, kita boleh merealisasikan paparan kecerunan dan penyembunyian elemen dengan mudah:

// 显示元素
$(selector).fadeIn(speed,callback);

// 隐藏元素
$(selector).fadeOut(speed,callback);

Antaranya, pemilih ialah pemilih elemen yang akan dikawal untuk dipaparkan dan disembunyikan. Kelajuan ialah kelajuan kecerunan. panggil balik ialah fungsi panggil balik yang dipanggil apabila kecerunan selesai.

Selain itu, jQuery juga menyediakan kaedah toggle(), yang boleh bertukar mengikut keadaan elemen, iaitu, menyembunyikannya apabila elemen dipaparkan dan memaparkannya apabila elemen disembunyikan:

$(selector).toggle(speed,callback);

Tiga , Paparkan dan sembunyikan melalui Javascript asli

Apabila kita perlu mengelak daripada menggunakan rangka kerja seperti jQuery, kita biasanya perlu menggunakan Javascript asli untuk memaparkan dan menyembunyikan elemen. Kita boleh melakukan ini dengan mengubah suai gaya elemen atau secara langsung menetapkan nilai atribut keterlihatan elemen.

Kaedah 1: Ubah suai gaya elemen

Kami boleh memaparkan dan menyembunyikan elemen dengan mengubah suai gaya elemen. Apabila elemen perlu dipaparkan, kami menetapkan nilai atribut paparan gayanya kepada menyekat atau sekatan sebaris:

// 显示元素
document.getElementById("element_id").style.display = "block | inline-block";

Apabila elemen perlu disembunyikan, tetapkan nilai atribut paparan gayanya kepada tiada:

// 隐藏元素
document.getElementById("element_id").style.display = "none";

Kaedah 2: Tetapkan atribut keterlihatan elemen

Kaedah lain ialah untuk memaparkan dan menyembunyikan elemen dengan menetapkan atribut keterlihatan elemen. Pendekatan ini mengekalkan saiz dan kedudukan elemen.

Apabila elemen perlu dipaparkan, tetapkan nilai atribut keterlihatannya kepada boleh dilihat:

// 显示元素
document.getElementById("element_id").style.visibility = "visible";

Apabila elemen perlu disembunyikan, tetapkan nilai atribut keterlihatannya kepada tersembunyi:

// 隐藏元素
document.getElementById("element_id").style.visibility = "hidden";

Perlu diingat bahawa apabila menggunakan atribut keterlihatan untuk menyembunyikan elemen, elemen itu masih menduduki kedudukannya pada halaman.

4. Paparkan dan sembunyikan melalui React

Dalam React, kami biasanya menggunakan keadaan komponen untuk mengawal paparan dan menyembunyikan elemen. Apabila keadaan komponen berubah, React akan memaparkan semula halaman secara automatik untuk menunjukkan dan menyembunyikan elemen.

Sebagai contoh, kod berikut memaparkan dan menyembunyikan elemen dengan mengklik butang:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }
  
  toggleElement = () => {
    this.setState({
      showElement: !this.state.showElement
    });
  }
  
  render() {
    const { showElement } = this.state;
    return (
      <div>
        <button onClick={this.toggleElement}>Toggle Element</button>
        {showElement && <div>Element Content</div>}
      </div>
    );
  }
}

Dalam kod di atas, showElement ialah keadaan yang digunakan untuk mengawal paparan dan menyembunyikan elemen. Apabila butang diklik, kaedah toggleElement() mencetuskan perubahan dalam keadaan dan memaparkan semula halaman. Apabila showElement adalah benar, elemen akan dipaparkan pada halaman apabila showElement adalah palsu, elemen akan disembunyikan.

Di atas ialah beberapa kaedah pelaksanaan paparan dan sembunyikan sama ada anda menggunakan Javascript asli, jQuery atau React, selagi anda memilih kaedah yang sesuai untuk melaksanakannya, anda boleh memaparkan elemen apabila diperlukan dan menyembunyikannya. apabila tidak diperlukan. Dengan itu meningkatkan kesan interaksi halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci tunjukkan hide javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!