Изменить элемент при нажатии на текст параграфа

@GERALD2799 · Регистрация: 27.09.2016

Студворк — интернет-сервис помощи студентам

должна происходить следующая вещь:
у меня есть пианино где ноты обозначены соответствующим образом

HTML5
1
2
3
4
5
6
7
8
    <ul id="piano"> 
        <li><div class="anchor" id="f1-key"></div></li>      
        <li><div class="anchor" id="g1-key"></div><span id="f1s-key"></span></li> 
        <li><div class="anchor" id="a2-key"></div><span id="g1s-key"></span></li> 
        <li><div class="anchor" id="b2-key"></div><span id="a1s-key"></span></li> 
        <li><div class="anchor" id="c2-key"></div></li> 
*********************************
</ul>

если нажать на текст параграфа ноты с белой окраски (которое прописано в сss) меняются в зеленый. но в определенном порядке. то есть "до-ми-ре". при этом все ноты будут белые и только "до" зелененою, после нажаття на "до" эта нота становится белой, а нота "ми" зеленой и так далее. своего рода подсказка по которым нотам нужно играть

@Balanaar · 01.11.2016, 10:50

Где вопрос-то? Что не получается? Где JS и CSS?

@GERALD2799 · 01.11.2016, 22:07 **[ТС]**

css могу скинуть. js вообще не учил, хочу, чтобы кто-то написал мне коротко код, чтобы я в нем разобрался и смог его приминяти

@BANO · 01.11.2016, 23:02

Не по теме:

Сообщение от GERALD2799

хочу, чтобы кто-то написал мне коротко код, чтобы я в нем разобрался и смог его приминяти

Шансов 0...:no:

@ntlinuxnt · 01.11.2016, 23:03

Что вы хотите?

@j2FunOnly · 02.11.2016, 10:37

Сообщение от GERALD2799

своего рода подсказка по которым нотам нужно играть

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul id="piano">
  <li><div class="anchor" id="f1"></div></li>
  <li><div class="anchor" id="g1"></div><span id="f1s"></span></li>
  <li><div class="anchor" id="a2"></div><span id="g1s"></span></li>
  <li><div class="anchor" id="b2"></div><span id="a1s"></span></li>
  <li><div class="anchor" id="c2"></div></li>
</ul>
 
<div class="sequence" data-sequence="f1-g1-a2-g1s">
  First sequence
</div>
<div class="sequence" data-sequence="b2-a2-g1-f1-c2-c2">
  Second sequence
</div>
 
<script src="app.js" charset="utf-8"></script>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#piano > li {
  display: inline-block;
  position: relative;
}
 
#piano div{
  width: 50px;
  height: 200px;
  border: 1px solid black;
}
 
#piano span {
  display: block;
  width: 50px;
  height: 150px;
  border: 1px solid black;
  background-color: #252525;
  position: absolute;
  left: -30px;
  top: 0;
}
 
#piano .next {
  transition: background .5s;
  background-color: green;
}

app.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var Tutorial = function (params) {
  var params = params || {};
  var el = document.querySelector(params.id);
  var teaching = false;
  var currentStep = 0;
  var sequence;
 
  var $ = function (selector) {
    return el.querySelector(selector);
  };
 
  el.onclick = function (e) {
    if(!teaching || e.target.id != sequence[currentStep]) return;
 
    e.target.classList.remove('next');
    currentStep++;
    if(sequence.length == currentStep) currentStep = 0;
    $('#' + sequence[currentStep]).classList.add('next');
  };
 
  this.setSequence = function (s) {
    sequence = s.split('-');
    if(teaching) $('.next').classList.remove('next');
    teaching = true;
    currentStep = 0;
    $('#' + sequence[currentStep]).classList.add('next');
  }
};
 
var tutor = new Tutorial({id: '#piano'});
 
var sequences = document.querySelectorAll('.sequence');
for(var i = 0, l = sequences.length; i < l; i++) {
  sequences[i].onclick = function () {
    tutor.setSequence(this.dataset.sequence);
  }
};

https://jsfiddle.net/j2FunOnly/zrm2r6uu/

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	01.11.2016, 10:50
	Где вопрос-то? Что не получается? Где JS и CSS? 1

@GERALD2799 10 / 10 / 13 Регистрация: 27.09.2016 Сообщений: 248
	01.11.2016, 22:07 [ТС]
	css могу скинуть. js вообще не учил, хочу, чтобы кто-то написал мне коротко код, чтобы я в нем разобрался и смог его приминяти 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	01.11.2016, 23:03
	Что вы хотите? 1

Опции темы

Изменить элемент при нажатии на текст параграфа

Решение