Скрыть / показать себя на основе флажка радио

ProgramBox

Скрыть / показать себя на основе флажка радио

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я работаю над веб-сайтом, где я могу использовать только HTML и CSS (без скрипта). Платформа — это квадратное пространство, и вам действительно сложно работать с кодом, но я должен справляться. Кроме того, они используют меньший препроцессор для стилей.

У меня есть 3 раздела с полноразмерной меткой в них, а затем svg-код и текст (я сделал метку полноразмерной, чтобы при каждом нажатии на эти разделы что-то происходило).

Когда вы нажимаете на любой из 3 разделов, все они исчезают, и появляется 4-й раздел со ссылкой «возврат». Когда вы нажимаете на «возврат», другие divs должны появиться снова, а «возврат» скрывается. Однако, несмотря на то, что «возврат» скрывается, другие поля не отображаются.

Мне нужны свойства flexbox для стилизации.

 .resource-block {
  display: flex;
  width: 25vw;
  height: 25vw;
}

.resource-block-label {
  width: 25vw;
  height: 25vw;
  display: flex;
  cursor: pointer;
}

.resource-return-label {
  display: none;
  cursor: pointer;
}

.resource-block-input:checked~.resource-return-label {
  display: block;
}

.resource-block-input:checked~.resource-block {
  display: none;
}

.resource-return-input:checked~.resource-block {
  display: flex;
}

.resource-return-input:checked~.resource-return-label {
  display: none;
}

 <div>
  <input name="resource-block" type="radio" id="rb-0" class="resource-block-input" />
  <div class="resource-block">
    <div class="resource-block-content">
      <label for="rb-0" class="resource-block-label">
                <svg>[svg code code]
                </svg>
                <span>1</span>
            </label>
    </div>
  </div>
  <input name="resource-block" type="radio" id="rb-1" class="resource-block-input" />
  <div class="resource-block">
    <div class="resource-block-content">
      <label for="rb-1" class="resource-block-label">
                <svg>[svg code code]
                </svg>
                <span>2</span>
            </label>
    </div>
  </div>
  <input name="resource-block" type="radio" id="rb-2" class="resource-block-input" />
  <div class="resource-block">
    <div class="resource-block-content">
      <label for="rb-2" class="resource-block-label">
                <svg>[svg code code]
                </svg>
                <span>3</span>
            </label>
    </div>
  </div>
  <input name="resource-return" type="radio" id="rb-return" class="resource-return-input">
  <label for="rb-return" class="resource-return-label">amp;lt Return</label>
</div>

Ответ №1:

Веб-сайт Squarespace особенно сложен, когда дело доходит до редактирования кода с помощью html или css, поскольку у них уже есть так много собственного пользовательского кода. Поэкспериментируйте со свойством !important в css. Это свойство переопределяет свойства css, которые Squarespace применяет к своим элементам. Если у вас есть дополнительные вопросы, вы можете задать их на форуме Squarespace, поскольку они специализируются в этой области. Хотя, если у вас есть возможность протестировать, я бы рекомендовал Webflow. Это похоже на Squarespace в том смысле, что вам действительно не нужно кодировать, но вы можете добавить пользовательский код и быть намного более креативным с ним.

1. Я знаю ограничения sqsp, и я их ненавижу, но мне абсолютно необходимо с этим работать. !важно, не работает вообще. Это проблема с моим кодом, а не с sqsp. Поскольку начальное отображение / скрытие работает правильно, это тоже должно быть. Но я думаю, может быть, есть ограничение, основанное на том, как я форматирую свой css (то, что приходит последним, должно иметь приоритет).

Ответ №2:

name=resource-return name=resource-block Нажмите кнопку возврата, чтобы все радиовходы были связаны. Кроме того, я просто хотел узнать, почему вам не разрешено использовать скрипты или javascript, поскольку Squarespace допускает javascript.

 .resource-block {
  display: flex;
  width: 25vw;
  height: 25vw;
}

.resource-block-label {
  width: 25vw;
  height: 25vw;
  display: flex;
  cursor: pointer;
}

.resource-return-label {
  display: none;
  cursor: pointer;
}

.resource-block-input:checked~.resource-return-label {
  display: block;
}

.resource-block-input:checked~.resource-block {
  display: none;
}

.resource-return-input:checked~.resource-block {
  display: flex;
}

.resource-return-input:checked~.resource-return-label {
  display: none;
}

   <div>
    <input name="resource-block" type="radio" id="rb-0" class="resource-block-input" />
    <div class="resource-block">
      <div class="resource-block-content">
        <label for="rb-0" class="resource-block-label">
                  <svg>[svg code code]
                  </svg>
                  <span>1</span>
              </label>
      </div>
    </div>
    <input name="resource-block" type="radio" id="rb-1" class="resource-block-input" />
    <div class="resource-block">
      <div class="resource-block-content">
        <label for="rb-1" class="resource-block-label">
                  <svg>[svg code code]
                  </svg>
                  <span>2</span>
              </label>
      </div>
    </div>
    <input name="resource-block" type="radio" id="rb-2" class="resource-block-input" />
    <div class="resource-block">
      <div class="resource-block-content">
        <label for="rb-2" class="resource-block-label">
                  <svg>[svg code code]
                  </svg>
                  <span>3</span>
              </label>
      </div>
    </div>
    <input name="resource-block" type="radio" id="rb-return" class="resource-return-input">
    <label for="rb-return" class="resource-return-label">amp;lt Return</label>
  </div>