Изменить: цель в JavaScript - PullRequest
Новая
       6

Изменить: цель в JavaScript

0 голосов
/ 25 февраля 2019

У меня есть это в CSS: 

#box:target {
    box-shadow: 0px 0px 20px black;
}

На «родительской» странице (page1) у меня есть кнопка, которая заставляет вас перейти на другую страницу: «page2.html # box».Таким образом, #box:target применяется, когда я загружаю страницу.Но с помощью кнопки на странице 1 я активирую функцию, целью которой является изменение свойств #box:target.Я ищу способ изменить это в JavaScript.Не :focus.

1 Ответ

0 голосов
/ 25 февраля 2019

Уведомление для читателей

Этот ответ касается оригинального поста Первый черновик

ОП был отредактирован по совершенно другому вопросу.Так что, если этот ответ сбивает с толку, вам необходимо просмотреть изменения.Я прошу прощения за неудобства.

:target

Вам не нужен JavaScript для простого переключения стилей.Похоже, вы неправильно поняли требования, необходимые для реализации псевдокласса :target.

Требования

  1. Два <a> тега nchor и тег любого типа в качестве цели. 

        <a>ON</a>  <a>OFF</a>  <section>SECTION</section>

    Один <a> будет "включать" новый стиль <section>, а другой <a> будет "выключать его" .

  2. Затем <section> требуется #id.Для обоих <a> требуется атрибут href.Значения каждого href отличаются от других и являются конкретными (см. Комментарий ниже этого примера): 

          <a href="">ON</a>     <a href="">OFF</a>  <section id="S">SECTION</section>

    ON: Должно быть ☝ OFF: Должно быть 10
    #id цели: #S значение "без прыжков" #/

  3. В CSS добавить дванаборы правил:

    1. Первым является целевой тег по умолчанию ( OFF ): 
      #S { width: 44vw; height: 44vw; border: 4px solid #444 }
    2. Второй - это активированный целевой тег ( ON ).Суффикс псевдокласса :target: 
      #S:target { text-shadow: 4px 4px 4px 4px #444; }

  4. Вот как HTML-макет должен выглядеть более или менее: 

       <a href="#S">ON</a>  <a href="#/">OFF</a>  <section id="S">SECTION</section>

Демо 

html,
body {
  font: 900 10vh/1 Consolas;
}

a {
  color: blue;
}

a:hover,
a:active {
  color: cyan;
}

#B {
  box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
  border: 6px inset rgba(0, 0, 0, 0.8);
  width: 40vw;
  height: 40vh;
  font-size: 20vh;
  text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}

#B:target {
  box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}
<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>

<figure id='B' class='box'>
  <figcaption>BOX</figcaption>
</figure>
...