Привет!
Делаю динамические табы.
Структура такая:
<ul>
<li data-attr="a">....</li>
<li data-attr="b">....</li>
<li data-attr="c">....</li>
...
<li data-attr="z">....</li>
</ul>
<div>
<div data-attr="a"></div>
<div data-attr="b"></div>
<div data-attr="c"></div>
...
<div data-attr="z"></div>
</div>
К каждому табу
li привязан свой контект
div. Табы создаются динамически, при создании им (
li и
div) задаётся
data-attr, по которому потом при удалении они в связке и должны удаляться.
"Выборка" на удаление производится при помощи
document.querySelectorAll(). Проблема в том, что в отличие от HTML5, в CSS3 не валидны названия селекторов, начинающихся с цифр.
При создании пользователь сам задаёт значение
data-attr, которое и является названием самой вкладки таб.
Какими способами можно решить такую задачу?
Видятся следующие варианты:
1. Делать привязку к классу и выбирать потом по классу, а не по data-attr.
2. Присваивать автоматически значеніе для data-attr при создании табов, чтобы там по умолчанию не было в начале цифр. Например, "tab" + "
название, введённое пользователем"
3. Блокировать ввод цифр для названия табов (только буквенные символы). Но такой вариант совсем не нравится.