Как скрыть javascript от декодера. Как показать и скрыть фрагмент текста или картинку в html с помощью JavaScript. Что для этого нужно

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

Сначала приведу пример, затем скрипт и пояснения.

Пример Код:

Всегда ли это будет работать?

Посмотреть розового слоника

Вот реализация данного фрагмента (жмите на ссылки):

Будет работать, если пользователь в своём браузере сознательно не отключил использование джаваскриптов. Все современные темы Wodpress с галереями и эффектами работают не без помощи JavaScript. Да и многие современные сайты используют эту технологию.

Скрипт

Нам понадобится небольшая функция show_hide().

function show_hide(obj_id) {
doc= document.getElementById(obj_id) ;
if(doc.style .display == "none" ) doc.style .display = "block" ;
else doc.style .display = "none"
}

Для WordPress функцию show_hide() можно разместить в файле header.php перед закрывающимся тегом , заключив её в теги и . Или разместить в подключаемом js-файле.

Подробнее

А скрываемый фрагмент помещаем в div

Подробности

Скрываемый фрагмент должен быть заключён в свой div c уникальным в пределах страницы id (здесь id="detail" ) и стилем display:none (который говорит браузеру, чтобы не отображал содержимое). При загрузке страницы этот скрываемый фрагмент загрузится в браузер, будет индексироваться поисковыми системами, только будет скрыт до тех пор, пока пользователь сознательно не нажмёт на ссылку Подробнее , где прописан вызов нашей функции show_hide . В качестве параметра в функцию передаётся значение id скрываемого div’а. Функция меняет свойство display с none на block и обратно. Что приводит к показу и скрытию фрагмента в div’е.

В случае с картинкой можно позаботиться о тех немногочисленных пользователях, у которых всё-таки отключён javascript, показав им картинку в другом окне. Нам же известен адрес картинки. Поэтому ссылку на картинку вида:

Посмотреть розового слоника

лучше переписать так:

Посмотреть розового слоника

При включенном джаваскрипте вы не увидите изменений. Зато при отключённом вместо нерабочей ссылки перед вами откроется картинка в новом окне.

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

Интересное решение реализовано в интернет-гипермаркете "Розетка". Вот например категории:

Когда мы нажимаем на данную ссылку то открывается полное описание без перезагрузки страницы. Если Вы хотите реализовать такое же решение, то ниже рассказано как это реализовывается на практике.
Этот момент можно решить благодаря языку программирования JavaScript.
JavaScript первоначально создавался для того, чтобы сделать web-странички «живыми».
Чтобы установить в текст Веб-страницы скрипты JavaScript, надо ввести дескриптор . Код JavaScript располагается между тэгами . Код можно размещать как в теле заголовка страницы (между тэгами ), так и в теле страницы (между тэгами ).
Для того работы скрипта надо создать функцию, которая будет использоваться в любой части сайта. Будем использовать функцию function sh()

sh();
function sh() {
info = document.getElementById("info");
button = document.getElementById("button");
if (info.style.display == "none") {
info.style.display = "block";
button.style.display = "none";
}
}

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

Подробнее...

ТЕКСТ КОТОРЫЙ БУДЕТ СКРЫТЫЙ

Здесь вызывается функция function sh()
Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block

Вот пример того что получилось после того как применили функцию к тексту:

В этом примере на страничке было скрыто 3000 символов SEO-текста, которые были прописаны для продвижения сайта. При нажатии на ссылку сама ссылка «Подробнее…» исчезнет благодаря свойству style.display указанном в функции.
Таким образом Вы можете реализовать данный функционал. Если у Вас остались вопросы, то задавайте их в комментариях.

Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.

CSS

В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.

Спрятать по имени класса (class)

HTML пример

этот блок нужно спрятать

CSS пример

Sidebar {display: none;}

.

Спрятать по id

HTML пример

этот блок нужно спрятать

CSS пример

#sidebar {display: none;}

Код выше скроет все элементы на странице с .

Спрятать по другим атрибутам

В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.

HTML пример

Ссылка

CSS пример

Container div:nth-child(2) {display: none} .

Container div:nth-child(2) спрячет второй div внутри блока.container.

div спрячет все div элементы со страницы, у которых есть data-id атрибуты со значением "hello-world" , если указать так , то это будет скрыты не только div элементы, но уже все элементы будут проверены на наличие такого атрибута и значения.

Вы так же можете убрать элемент другими свойствами CSS, например:

Sidebar { display: none; opacity: 0; z-index: -999; visibility: hidden; width: 0; height: 0; position: absolute; left: -9999; top: -9999; }

Описание CSS свойств из примера выше

opacity: 0 — устанавливает прозрачность до 0, тем самым элемент совсем не будет показан на странице, чтобы снова показать нужно установить 0.1 (10% видимости элемента), 0.2, … 1.

z-index: -999 — устанавливает расположение слоя. Чем выше цифра, тем элемент, который вы хотите спрятать будет находиться выше других слоев. Например, если у слоя.sidebar стоит z-index: 999, а у.container стоит z-index: 100, то даже если поставить эти слои друг на друга, .sidebar все равно будет отображаться выше.container, так как index у него стоит выше.

visibility: hidden — схожее свойство с display: none

width: 0;height: 0; — если их поставить к нулю, то у вашего элемента высота и ширина будет равно 0, тем самым он вообще не будет показывать на экране.

position: absolute; left: -9999; top: -9999 — в данном случае, элемент переместиться за пределы экрана пользователя, тем самым не будет виден на странице

jQuery

Элементы на странице так же можно скрыть при помощи jQuery. Вы должны сначала установить библиотеку jQuery, прежде чем начать пользоваться ее функциями.

Обращаться к элементам можно таким же образом, как и в CSS. Проблема CSS в том, что с его помощью можно только прятать элементы.

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

Удалить элемент с помощью класса (class)

Скрипт ниже удалить все элементы со страницы с классом sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $(".sidebar").remove(); }); });

Удалить элемент с помощью id

Скрипт ниже удалить элемент со страницы с id sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $("#sidebar").remove(); }); });

Удалить элемент по атрибуту

$(function() { $(document).ready(function() { $("a").remove(); }); });

Таким образом можно удалить все что угодно на странице.

JavaScript

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

Удалить элемент с помощью class

HTML пример

Текст

JavaScript пример

document.getElementsByClassName("sidebar").remove()