Оптимизайка: S_A_N_T_A, @media и flexbox решат этот вопрос.
Спасибо! Очень интересное решение. Надеюсь в моем случае все таки удастся его применить. Уже как несколько часов тестирую. На примерах все отлично получается. Но в моем случае (он несколько отличается от картинки которую скинул), пока реализовать не получилось.
Sitealert: Оптимизайка, по условиям задачи исходный код требуется переписывать, а не визуально блоки переставлять.
Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.
Сложность в том, что:
1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
Просьба откликнуться тем, кто действительно может помочь по существу
Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете.
Sitealert: S_A_N_T_A, чёта Вы не догоняете...:( Оптимизайка, конечно затейник, довольно остроумно решил задачу, но Вашим условиям это решение действительно удовлетворяет.
Please посмотрите мое прошлое сообщение. Там вроде подробно все описал.
Ваш код:
<div id="call"> <input type="radio" name="show" id="show1" /> - вот id номер 1 <input type="radio" name="show" id="show2" /> - вот id номер 2 <form> <input class="secret1" type="text" value="secret1"/> <input class="secret2" type="text" value="secret2"/> <input class="nosecret" type="text" value="no secret"/> </form> </div> <label for="show1">Link 1</label> <label for="show2">Link 2</label>
По вашему примеру
При клике по кнопке идет сценарий либо для show1, либо сценарий для show2
У меня может быть только 1 ID например только show1
То есть обе ссылки выглядят примерно так (у них общий show1):
кнопка 1
<a data-target="#show1">кнопка 1</a>
кнопка 2
<a data-target="#show1">кнопка 2</a>
Если вы по прежнему подтверждаете, что заблуждаюсь я сам. Ок! Буду искать решение дальше. Мне все равно придется искать решение дальше! И позже, если конечно разберусь. Опубликую его тут. (Вероятно я сам туплю)
Как я могу при нажатии 1 кнопки отобразить только текст "поле 1"?
При нажатии второй кнопки отобразить только текст "поле 2"?
---------- Добавлено 23.10.2018 в 22:54 ----------
Я же написал в самом начале
Было бы круто использовать несколько id для div, но я так понимаю, что так нельзя. Как при нажатии кнопки заставить присвоить уникальный класс? Чтобы потом скрыть не нужные поля в разных формах.
так что подумайте над тем, чтоб скрытая форма была сразу и показывать скрытое по клику, так можно ограничиться только знаниями верстки (html/css).
Ребят я понял, что мне эти варианты не по зубам и решил пойти немного другим путем. Вместо трех форм, сделаю 1 со всеми полями, а не нужные поля скрою через display: none. То есть там где эти поля не нужны буду скрывать, а где нужны будут показываться.
Но есть одно НО
Кнопка 1:
<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>
Кнопка 2:
<a class="call-f" data-toggle="modal" data-target="#call" title="название 2" data-innerhtml=" название 2"> название 2</a>
Было бы круто использовать несколько id для div, но я так понимаю, что так нельзя. Как при нажатии кнопки заставить присвоить уникальный класс? Чтобы потом скрыть не нужные поля в разных формах.
S_A_N_T_A, @media и flexbox решат этот вопрос.
Спасибо! Очень интересное решение. Надеюсь в моем случае все таки удастся его применить. Уже как несколько часов тестирую. На примерах все отлично получается. Но в моем случае (он несколько отличается от картинки которую скинул), пока реализовать не получилось.
Оптимизайка, по условиям задачи исходный код требуется переписывать, а не визуально блоки переставлять.
Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.
Сложность в том, что:
1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
Просьба откликнуться тем, кто действительно может помочь по существу
Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете.
Воспользуйтесь class. Там можно
присвойте
<input class="form form1 form2">
<input class="form form1 form3">
<input class="form form2">
<input class="form form3">
и т.д.
а далее
на джейквери
$('#button1').click(function(){
$('.form').css('display', 'none');
$('.form1').css('display', 'block');
return false;
})
Знаю что что то делаю не так, так как не знаю js
Но что именно
<a nclick="Pryachem" data-target="#call">Кнопка 1</a>
<a nclick="Pryachem2" data-target="#call">Кнопка 2</a>
<div id="call">
<form>
<div class="pole1">Поле 1</div>
<div class="pole2">Поле 2</div>
</form>
</div>
<script type="text/javascript">
var Pryachem = click(function(){
$('.pole1').css('display', 'none');
return false;
})
</script>
Хочу при клике по "Кнопка 1" спрятать "Поле 1".
---------- Добавлено 24.10.2018 в 10:29 ----------
РЕБЯТ ЕСЛИ КОМУ ПОНАДОБИТСЯ, ВОТ РЕШЕНИЕ:
<a data-target="#call" class="first">Кнопка 1</a> (ДОБАВЛЯЕМ КЛАСС FIRST)
<a data-target="#call" class="second">Кнопка 2</a> (ДОБАВЛЯЕМ КЛАСС SECOND)
<div id="call">
<form>
<div class="pole1">Поле 1</div>
<div class="pole2">Поле 2</div>
</form>
</div>
<script>
$(function(){
$('.first').click(function(){
$('.pole1').show();
$('.pole2').hide();
});
$('.second').click(function(){
$('.pole2').show();
$('.pole1').hide();
});
});
</script>
S_A_N_T_A, чёта Вы не догоняете...:(
Оптимизайка, конечно затейник, довольно остроумно решил задачу, но Вашим условиям это решение действительно удовлетворяет.
Please посмотрите мое прошлое сообщение. Там вроде подробно все описал.
Ваш код:
<div id="call">
<input type="radio" name="show" id="show1" /> - вот id номер 1
<input type="radio" name="show" id="show2" /> - вот id номер 2
<form>
<input class="secret1" type="text" value="secret1"/>
<input class="secret2" type="text" value="secret2"/>
<input class="nosecret" type="text" value="no secret"/>
</form>
</div>
<label for="show1">Link 1</label>
<label for="show2">Link 2</label>
По вашему примеру
При клике по кнопке идет сценарий либо для show1, либо сценарий для show2
У меня может быть только 1 ID например только show1
То есть обе ссылки выглядят примерно так (у них общий show1):
кнопка 1
<a data-target="#show1">кнопка 1</a>
кнопка 2
<a data-target="#show1">кнопка 2</a>
Если вы по прежнему подтверждаете, что заблуждаюсь я сам. Ок! Буду искать решение дальше. Мне все равно придется искать решение дальше! И позже, если конечно разберусь. Опубликую его тут. (Вероятно я сам туплю)
Ваш код:
<div id="call">
<input type="radio" name="show" id="show1" /> - вот id номер 1
<input type="radio" name="show" id="show2" /> - вот id номер 2
<form>
<input class="secret1" type="text" value="secret1"/>
<input class="secret2" type="text" value="secret2"/>
<input class="nosecret" type="text" value="no secret"/>
</form>
</div>
<label for="show1">Link 1</label>
<label for="show2">Link 2</label>
По вашему примеру
При клике по кнопке идет сценарий либо для show1, либо сценарий для show2
У меня может быть только 1 ID например только show1
То есть обе ссылки выглядят примерно так (у них общий show1):
кнопка 1
<a data-target="#show1">кнопка 1</a>
кнопка 2
<a data-target="#show1">кнопка 2</a>
Вы сейчас о чём, - о чём-то своём? Странные у Вас проблемы...
Вот картинка - https://ibb.co/jG2bGV
Там форма которая находится внутри div id.
Это div id называется call
вот кнопка 1
<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>
вот кнопка 2
<a class="call-f" data-toggle="modal" data-target="#call" title="название 2" data-innerhtml=" название 2"> название 2</a>
Вот html код для обоих кнопок
<div id="call">
<form method="post" action="" id="formname" name=" formname ">
поле 1<br />
поле 2
</form>
</div>
Условие:
<div id="call">
заменить id="call" - не могу
добавить еще один id - тоже не могу
Вопрос
Как я могу при нажатии 1 кнопки отобразить только текст "поле 1"?
При нажатии второй кнопки отобразить только текст "поле 2"?
---------- Добавлено 23.10.2018 в 22:54 ----------
Я же написал в самом начале
S_A_N_T_A, https://jsfiddle.net/4p6wc7m8/1/
У меня может быть только 1 ID, в этом то и проблема =(
S_A_N_T_A, аналогично, только не может быть одинаковых id. Одинаковые классы могут быть.
Вот нарисовал - https://ibb.co/jG2bGV
---------- Добавлено 23.10.2018 в 21:24 ----------
Ваш пример подходит только если формы разные и классы разные.
---------- Добавлено 23.10.2018 в 21:27 ----------
Как обычно. Только потом не забудьте его убрать.
Нарисовал картинку, что я имею в виду.
Возможно сам не правильно объясняю)
---------- Добавлено 23.10.2018 в 21:29 ----------
В общем нужно чтобы каждая кнопка и форма были связаны 1 уникальным классом.
---------- Добавлено 23.10.2018 в 21:30 ----------
Кнопок несколько, форма одна. У формы для каждой кнопки должны быть скрыты некоторые поля. Для пользователя это будут типо разные формы.
---------- Добавлено 23.10.2018 в 21:38 ----------
Спасите человека, уже глаз дергается))
---------- Добавлено 23.10.2018 в 21:39 ----------
Еще раз продублирую
Вот нарисовал - https://ibb.co/jG2bGV
S_A_N_T_A, так вам не нужен уникальный:
https://jsfiddle.net/4p6wc7m8/
Не совсем оно.
Как полностью спрятать поле "No Secret" в одной форме и показать "No Secret"?
Если формы используют один и тот же <form></form>
А так же используют один и тот же Id.
Кнопка 1:
<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>
Кнопка 2:
<a class="call-f" data-toggle="modal" data-target="#call" title="название 2" data-innerhtml=" название 2"> название 2</a>
HTML код:
<div id="call">
<form method="post" action="" id="formname" name=" formname ">
Тут куча кода
</form>
</div>
У кнопок одинаковые ID, а поля в форме они должны одни скрыть, а другие показать.
Вот нарисовал - https://ibb.co/jG2bGV
S_A_N_T_A, для подгрузки придется овладеть таинствами javascript:
http://jsfiddle.net/h0d4u7b9/
так что подумайте над тем, чтоб скрытая форма была сразу и показывать скрытое по клику, так можно ограничиться только знаниями верстки (html/css).
Ребят я понял, что мне эти варианты не по зубам и решил пойти немного другим путем. Вместо трех форм, сделаю 1 со всеми полями, а не нужные поля скрою через display: none. То есть там где эти поля не нужны буду скрывать, а где нужны будут показываться.
Но есть одно НО
Кнопка 1:
<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>
Кнопка 2:
<a class="call-f" data-toggle="modal" data-target="#call" title="название 2" data-innerhtml=" название 2"> название 2</a>
HTML код:
<div id="call">
<form method="post" action="" id="formname" name=" formname ">
Тут куча кода
</form>
</div>
Было бы круто использовать несколько id для div, но я так понимаю, что так нельзя. Как при нажатии кнопки заставить присвоить уникальный класс? Чтобы потом скрыть не нужные поля в разных формах.
Это бы в корне решило вопрос