Название вкладки на javascript

Вкладки (Табы) на JavaScript

Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.

Вариант вкладок на чистом Javascript

Решение 1. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1.

.item <
display: inline-block;
padding: 10px;
margin: 2px;
>
.item:hover < cursor: pointer; >
.item.active < background: #ffe42369; >
.item, .tabs-content <
border: 1px solid #b7b7b7;
border-radius: 3px;
>
.tabs-content <
padding: 1rem;
min-width: 320px;>
.item-content <
height: 0;
transition: .4s;
opacity: 0;
>
.item-content.active <
height: auto;
opacity: 1; >

/* Табы */
document.addEventListener(‘DOMContentLoaded’, clickTabs());
function clickTabs() var tabs = document.querySelector(‘#tabs’);
var item = document.querySelectorAll(‘.item’);
var itemContent = document.querySelectorAll(‘.item-content’);
tabs.addEventListener(«click», function (event) if (event.target.classList == ‘item’) for ( let i = 0; i < item.length; i++ )item[i].classList.remove('active');
itemContent[i].classList.remove(‘active’);
>
event.target.classList.add(‘active’);
let idItemContent = event.target.id + ‘-content’;
let iC = document.getElementById(idItemContent);
iC.classList.add(‘active’);
>
>);
>

Источник

Как сделать — Заголовки вкладок

Узнать, как создавать заголовки вкладок с помощью CSS и JavaScript.

Заголовки вкладок

Нажмите на кнопку «город», чтобы отобразить соответствующий заголовок:

Лондон

Лондон является столицей Англии.

Париж

Париж является столицей Франции.

Токио

Токио является столицей Японии.

Осло

Осло является столица Норвегии.

Создание переключаемых вкладок заголовков

Шаг 1) Добавить HTML:

Пример

Создание кнопок для открытия определенного содержимого вкладки. Все элементы с class=»tabcontent» скрыты по умолчанию (с помощью CSS и JS). Когда пользователь нажимает на кнопку — он откроет содержимое вкладки, которое «соответствует» этой кнопке.

Шаг 2) Добавить CSS:

Стиль кнопок и содержимого вкладки:

Пример

/* Стиль кнопок вкладок */
.tablink background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
>

/* Изменение цвета фона кнопок при наведении курсора */
.tablink:hover background-color: #777;
>

/* Установка стилей по умолчанию для содержимого вкладки */
.tabcontent color: white;
display: none;
padding: 50px;
text-align: center;
>

Шаг 3) Добавить JavaScript:

Пример

function openCity(cityName, elmnt, color) <
// Скрыть все элементы с помощью по умолчанию */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i < tabcontent.length; i++) <
tabcontent[i].style.display = «none»;
>

// Удалите цвет фона всех ссылок/кнопок вкладок
tablinks = document.getElementsByClassName(«tablink»);
for (i = 0; i < tablinks.length; i++) tablinks[i].style.backgroundColor = "";
>

// Показать содержимое конкретной вкладки
document.getElementById(cityName).style.display = «block»;

// Добавить конкретный цвет кнопки, используемой для открытия содержимого вкладки
elmnt.style.backgroundColor = color;
>

// Получить элемент с помощью и нажмите на нее
document.getElementById(«defaultOpen»).click();

Совет: Также, посмотрите Как сделать вкладки.

Источник

Как отобразить количество оповещений в названии вкладки браузера

Веб-сайты и веб приложения с постоянно обновляющимся контентом должны оповещать об обновлениях в том случае, если пользователь ушел с вкладки, но не закрыл ее.

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Оповещения Trello, Facebook и Twitter

В этом уроке мы воссоздадим подобные оповещения. Посмотрите демо (англ.), чтобы понять, чем мы будем заниматься.

Используем название страницы

Мы начнем с добавления числа обновлений к названию страницы, как это сделано у Facebook и Twitter.

Существует множество способов извлечения данных (спросите у знакомого разработчика). В нашем же случае мы допустим, что уже знаем количество обновлений и теперь можем поиграться с JavaScript. На данный момент у нас ноль обновлений:

Далее следует основная часть кода, которая будет изменять название страницы. Прежде всего добавим document.title, который получает текущее название страницы:

Затем создаем новую функцию, которая будет изменять часть названия:

Здесь вы видите, что мы используем оператор JavaScript ++ . Для демонстрационных целей » ++» увеличит число count на 1.

Теперь создадим новую функцию, которая запустит changeTitle() :

function newUpdate() < update = setInterval(changeTitle, 2000); >var docBody = document.getElementById('site-body'); docBody.onload = newUpdate; 

Функция выше будет проверять обновления каждые 2000 миллисекунд (2 секунды). Функция запустится, как только загрузится страница.

Первый метод — довольно прямолинейный. Мы получаем число обновлений и передаем его в название. Вы можете поменять скобки с ( ) на [ ] или < >в функции changeTitle() .

Используем favicon

Теперь используем второй подход, который изменяет favicon, веб приложение Trello. Для этого нам понадобится подготовить два варианта favicon. Первый — когда нет обновлений, второй — когда обновления появились.

Начинаем с привязки favicon к документу.

Затем укажем путь к новому favicon с помощью переменной JavaScript.

var iconNew = 'img/favicon-dot.gif'; 

Как и в первом методе, мы создаем две функции:

function changeFavicon() < document.getElementById('favicon').href = iconNew; >function newUpdate() < update = setInterval(changeFavicon, 3000); setTimeout(function() < clearInterval( update ); >, 3100); > var docBody = document.getElementById('site-body'); docBody.onload = newUpdate; 

Первая функция, changeFavicon() , заменит нашу первоначальную favicon на тот, что с красным кружком. Вторая функция, newUpdate() , будет исполнять первую функцию через определенный промежуток времени.

Кажется есть, на что посмотреть!

Второй метод не такой сложный, каким кажется на первый взгляд — наоборот, он проще чем первый, где мы обновляли название страницы. Кроме того, мы можем проявить немного креатива, добавив анимации к favicon. Но без особого фанатизма.

Заметка: Chrome не поддерживает favicon с анимацией.

Используем Favico.js

Итак, последний способ — использование JavaScript библиотеки Favico.js, автором которой является Miroslav Magda. Библиотека предоставляет удобный API с множество различных опций.

Начнем мы с указания параметров нового Favico : положение, анимация, фоновый цвет, цвет текста.

Затем добавим пару функций, которые запустят весь процесс и в конечном итоге отобразят бейджик на favicon.

var num = 0; function generateNum() < num++; return num; >function showFaviconBadge() < var num = generateNum(); favicon.badge(num); >function newUpdate() < update = setInterval(showFaviconBadge, 2000); >var docBody = document.getElementById('site-body'); docBody.onload = newUpdate; 

В какой-то мере наш код напоминает первый метод. Мы начинаем с создания функции, которая будет симулировать количество обновлений. Вторая функция, showFaviconBadge() , будет вставлять это число в бейдж и отображать сам бейдж в favicon. Последняя функция newUpdate() запустит вторую через определенный интервал.

Заключение

В этом уроке мы научились использовать название вкладки браузера в качестве средства оповещения пользователей. Мы воссоздали методы, которые применяются на таких популярных веб-сайтах, как Facebook, Twitter, и Trello.

Повторюсь, вам скорее всего придется внести пару изменений, чтобы удовлетворить потребностям вашего проекта. Но предоставленные примеры послужат отличным стартом!

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

Источник

Как установить заголовок для новой вкладки браузера?

У меня есть вопрос о новой вкладке для ссылки. В любом случае, я могу установить заголовок закладки браузера, прежде чем пользователь нажмет на ссылку? Похоже, что нет никакого способа обсудить заголовок для новой вкладки, если html, содержащийся на новой вкладке, не имеет атрибута title. Я прав? Как установить заголовок?

//the href is dynamic so I can't set them one by one because I have 100+ html file here open me

href является динамическим, поэтому вы должны иметь некоторую информацию об этих страницах, поступающих из вашей БД или чего-либо еще. Так что установите их там, когда страница загружается .

как владеть новой вкладкой? у вас или есть внешняя ссылка? вызвать его, если вы можете установить заголовок над URL-адресом в качестве параметра и использовать его, когда вкладка открыта

@PaulS. Я не могу этого сделать, потому что он открывает новую вкладку, и у меня может быть более 100+ HTML-файлов для открытия. У меня нет доступа к этим файлам HTML, и они не указывают заголовок в HTML

5 ответов

Поскольку у вас это есть, это невозможно, потому что ваши ссылки — это просто обычные ссылки HTML. Когда новая страница открывается на новой вкладке, текущая страница не будет ссылаться на нее и поэтому не может ее каким-либо образом изменить. Вам нужно будет открыть страницу с помощью javascript и установить заголовок таким образом.

Вы можете динамически настраивать в window onload , чтобы найти все a теги и добавить click событие whihc открывает окно и устанавливает заголовок.

Если вы хотите различные названия для каждой страницы, вы можете хранить это в data- атрибут в a тега.

Обратите внимание, что это будет работать только со страницами в одном домене (для обеспечения безопасности) и что он не будет обрабатывать людей щелчком правой кнопкой мыши и нажатием «Открыть в новом окне». Средний щелчок в Windows, похоже, работает.

window.addEventListener("load", function() < // does the actual opening function openWindow(event) < event = event || window.event; // find the url and title to set var href = this.getAttribute("href"); var newTitle = this.getAttribute("data-title"); // or if you work the title out some other way. // var newTitle = "Some constant string"; // open the window var newWin = window.open(href, "_blank"); // add a load listener to the window so that the title gets changed on page load newWin.addEventListener("load", function() < newWin.document.title = newTitle; >); // stop the default 'a' link or you will get 2 new windows! event.returnValue = false; > // find all a tags opening in a new window var links = document.querySelectorAll("a[target=_blank][data-title]"); // or this if you don't want to store custom titles with each link //var links = document.querySelectorAll("a[target=_blank]"); // add a click event for each so we can do our own thing for(var i = 0; i < links.length; i++) < links[i].addEventListener("click", openWindow.bind(links[i])); >>); 

Вы можете передать заголовок с хешем и получить его на другой странице, если эта другая страница принадлежит вам, и вы можете изменить ее код.

2-я страница — измените тег открытия тела следующим образом:

Если страница, на которую вы ссылаетесь, не принадлежит вам, вы можете использовать метод window.open :

Спасибо, Никель, думаю, я неправильно понял ваш вопрос. Они находятся в одном домене, но у меня нет доступа ко 2-й странице. +1 хотя

У вас есть два варианта. Используя чистый HTML, вы можете позволить пользователю открывать ссылки, а затем менять заголовок. Или вы можете изменить заголовок с помощью встроенного JavaScript. Вот как вы это делаете:

Способ 1

Измените свои ссылки, назначив целевой атрибут, а затем позже используйте это имя окна для управления документом. Например, в ваших ссылках это будет: . Всякий раз, когда вы хотите изменить заголовок для этой страницы, вы должны использовать JavaScript как таковой: window.open(«», «theNewWindow»).document.title= «New Page Title!»; Однако проблема с этим методом заключается в том, что все ссылки с этим именем target/window будут открываться в том же окне. Кроме того, после первого щелчка ссылки ваш браузер не будет автоматически переключаться на новую вкладку/окно.

Способ 2

Измените свои ссылки, назначив атрибут onclick, который откроет ссылку вручную и сразу изменит название страницы. В основном это выглядело бы так: )(); return false;»> . Это открывает окно, основанное на атрибуте href, сразу же изменяет заголовок и устанавливает окно, чтобы изменить заголовок на тот, когда он заканчивает загрузку (на всякий случай, если на самом деле был тег заголовка).

Проблема с обоими этими методами (как упоминалось другими) заключается в том, что ваши html файлы должны находиться в одном домене.

Источник