Question

单击包含 Excel 的链接时，所有包含文本 excel 格式的元素将可见，其他元素将不可见。请帮忙。

HTML：

let excel = document.getElementById('excel');
let csv = document.getElementById('csv');
let txt = document.getElementById('txt');
let json = document.getElementById('json');
let sheet = document.getElementById('sheet');
let mysql = document.getElementById('mysql');
let oracle = document.getElementById('oracle');
let postgresql = document.getElementById('postgresql');
let mssql = document.getElementById('mssql');

excel.addEventListener('click', function() {
  document.getElementById('excel').classList.remove('hidden');
});

<div class="flex flex-col md:w-5/12 w-full border-4 border-yellow-200 text-xs md:text-base p-2 sm:p-6 mt-12 mb-12 md:m-0">
  <p>Veri analizi hizmetinden yararlanmak için verilerinizi yükleyin.</p>
  <p class="mt-8"> Nasıl veri yükleneceğini bilmiyorsanız, aşağıda bulunan uygun formattaki dosya örneklerini indirebilirsiniz </p>
  <p class="mt-4"> Formatlar hakkında bilgi almak için formatların üstüne tıklayınız.</p>
  <div class="grid grid-cols-3 text-blue-500">
    <a href="#" id="excel"> Excel </a>
    <a href="#" id="csv"> Csv </a>
    <a href="#" id="txt"> Txt </a>
    <a href="#" id="json"> Json </a>
    <a href="#" id="sheets"> Sheets </a>
    <a href="#" id="mysql"> Mysql </a>
    <a href="#" id="oracle"> Oracle </a>
    <a href="#" id="postgresql"> Postgresql </a>
    <a href="#" id="mssql"> Mssql </a>
  </div>
  <div class="formats h-full w-full h-max flex justify-center items-center">
    <h1 id="excel-format" class="hidden"> Excel formatı </h1>
    <h1 id="csv-format" class="hidden"> Excel formatı </h1>
    <h1 id="txt-format" class="hidden"> Excel formatı </h1>
    <h1 id="json-format" class="hidden"> Excel formatı </h1>
    <h1 id="sheets-format" class="hidden"> Excel formatı </h1>
    <h1 id="mysql-format" class="hidden"> Excel formatı </h1>
    <h1 id="oracle-format" class="hidden"> Excel formatı </h1>
    <h1 id="postgresql-format" class="hidden"> Excel formatı </h1>
    <h1 id="mssql-format" class="hidden"> Excel formatı </h1>
  </div>
</div>

我使用 Tailwind Css 来设计网页的 css 样式。

Answer 1

你能试试这个吗：

Ignoring exception in on_ready

Traceback (most recent call last):
  File "C:\Users\kshar\AppData\Roaming\Python\Python37\site-packages\discord\client.py", line 343, in _run_event
    await coro(*args, **kwargs)
  File "C:\Users\kshar\Desktop\ghost bot\test.py", line 14, in on_ready
    print(guild.member_count)
  File "C:\Users\kshar\AppData\Roaming\Python\Python37\site-packages\discord\guild.py", line 741, in member_count
    return self._member_count
AttributeError: _member_count

let excel = document.getElementById('excel');
let csv = document.getElementById('csv');
let txt = document.getElementById('txt');
let json = document.getElementById('json');
let sheet = document.getElementById('sheets');
let mysql = document.getElementById('mysql');
let oracle = document.getElementById('oracle');
let postgresql = document.getElementById('postgresql');
let mssql = document.getElementById('mssql');

let formats = [excel, csv, txt, json, sheet, mysql, oracle, postgresql, mssql];

formats.forEach(format => {
    format.addEventListener('click', function (e) {
        formats.forEach(otherFormat => {
            document.getElementById(otherFormat.id + '-format').classList.toggle("hidden",otherFormat !== format)
        })
    });
});

Answer 2

你可以使用

string.includes('str_name')

要检查 Excel 是否存在，如果您使用的是顺风 css，您应该 use class : invisible 而不是 hidden。

let excel = document.getElementById('excel');
let csv = document.getElementById('csv');
let txt = document.getElementById('txt');
let json = document.getElementById('json');
let sheet = document.getElementById('sheet');
let mysql = document.getElementById('mysql');
let oracle = document.getElementById('oracle');
let postgresql = document.getElementById('postgresql');
let mssql = document.getElementById('mssql');
let excontent = document.querySelectorAll('h1');

excel.addEventListener('click', function() {
  //excel.classList.remove('hidden');
  //console.log(excel);
  //console.log(excontent);
  excontent.forEach(q => {
      if(q.innerText.includes('Excel')){
          q.classList.remove('hidden');
      }
  })
});

.hidden{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="s.css">
</head>
<body>
    <div class="flex flex-col md:w-5/12 w-full border-4 border-yellow-200 text-xs md:text-base p-2 sm:p-6 mt-12 mb-12 md:m-0">
        <p>Veri analizi hizmetinden yararlanmak için verilerinizi yükleyin.</p>
        <p class="mt-8"> Nasıl veri yükleneceğini bilmiyorsanız, aşağıda bulunan uygun formattaki dosya örneklerini indirebilirsiniz </p>
        <p class="mt-4"> Formatlar hakkında bilgi almak için formatların üstüne tıklayınız.</p>
        <div class="grid grid-cols-3 text-blue-500">
          <a href="#" id="excel"> Excel </a>
          <a href="#" id="csv"> Csv </a>
          <a href="#" id="txt"> Txt </a>
          <a href="#" id="json"> Json </a>
          <a href="#" id="sheets"> Sheets </a>
          <a href="#" id="mysql"> Mysql </a>
          <a href="#" id="oracle"> Oracle </a>
          <a href="#" id="postgresql"> Postgresql </a>
          <a href="#" id="mssql"> Mssql </a>
        </div>
        <div class="formats h-full w-full h-max flex justify-center items-center">
          <h1 id="excel-format" class="hidden"> Excel formatı </h1>
          <h1 id="csv-format" class="hidden"> Excel formatı </h1>
          <h1 id="txt-format" class="hidden"> Excel formatı </h1>
          <h1 id="json-format" class="hidden"> Excel formatı </h1>
          <h1 id="sheets-format" class="hidden"> Excel formatı </h1>
          <h1 id="mysql-format" class="hidden"> Excel formatı </h1>
          <h1 id="oracle-format" class="hidden"> Excel formatı </h1>
          <h1 id="postgresql-format" class="hidden"> Excel formatı </h1>
          <h1 id="mssql-format" class="hidden"> Excel formatı </h1>
        </div>
      </div>
      <script src="app.js
      "></script>
</body>
</html>

同样，如果您使用，您可以使用检查和切换可见性

classList.add('hidden')

使一个项目可见而所有其他项目不可见

2 个答案: