Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как организовать вывод информации вкладки при клике на неё? (https://javascript.ru/forum/dom-window/69350-kak-organizovat-vyvod-informacii-vkladki-pri-klike-na-nejo.html)

Vladinir34 16.06.2017 14:18

Как организовать вывод информации вкладки при клике на неё?
 
Доброго дня всем.Знающие подскажите как модифицировать скрипт вкладок, что бы при клике на нужную вкладку информация во вкладке менялась с на

К примеру:

Вкладка (она активна изначально) 1: [aviable=main] тут текст 1 вкладки[/aviable]
Вкладка 2: [not-aviable=main] тут текст 2 вкладки [/not-aviable]

Результат который требуется (при клике на вторую вкладку):

Вкладка (она активна изначально) 1: [not-aviable=main] тут текст 1 вкладки[/aviable]
Вкладка 2: [aviable=main] тут текст 2 вкладки [/not-aviable]

Получается текст Вкладки 1, при клике на вкладку 2 закрывается тэгами , а содержимое вкладки 2 закрывается тэгами и наоборот.

Есть функция которая заменяет содержимое блока:
<script>	  
							  
$(document).ready(function() {

  $("#bdF77").click(function() {
    $('div#message').each(function() {

      $(this).replaceWith("[not-aviable=main]" + $(this).html() + "[/not-aviable]");

    });


  });
  
});				  
</script>

<div id="message">
<div class="soderjimoe">Тут текст</div>

</div>
<input type="button" value="GONDER" id="bdF77">


Возможно ли её приделать к вкладкам?

скрипт вкладок http://jsfiddle.net/fvcmev6t/4/

Если готовое решение посоветуете, буду благодарен.

j0hnik 16.06.2017 14:58

сделать можно
только вот такая замена убьет отображение
<head>
	<meta charset="utf-8">
	<style>
		div{
			display: block;
			width: 100px;
			height: 100px;
			border: 1px solid red;
			background-color: yellow;
		}

	</style>
</head>
<body>
<div id="id"> бла бла бла</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#id").click(function(){
$(this).replaceWith("[not-aviable=main]" + $(this).html() + "[/not-aviable]");
});
</script>
</body>

Vladinir34 16.06.2017 21:38

Это да, а к вкладкам как бы это приделать?

j0hnik 16.06.2017 21:44

Цитата:

Сообщение от Vladinir34 (Сообщение 455714)
Это да, а к вкладкам как бы это приделать?

на каком движке у вас сайт?
эти теги для чего нужны?

Vladinir34 16.06.2017 22:08

Dle, не обязательно акцент на тегах делать, пусть хоть <span></span>. Просто в чем суть: на полной странице новости, тегами выводятся инфо о новости, комментарии, форма добавления комментария и т.д. всё это на разных вкладках. Я думал сделать этим так, когда при клике на вкладку, инфа с предыдущих вкладок не грузилась даже в коде страницы, а грузилась инфа активной.

Если закрывать этими тегами инфу вкладки, то всё исчезает как надо, даже из кода страницы. Вот и хотел приделать это как то к вкладкам, чтоб грузилась инфа (так же и в коде страницы) только активной вкладки. Как то так.

j0hnik 16.06.2017 22:44

span-ом можно
сделал на активной будет span
на остальных нет.
http://jsfiddle.net/fvcmev6t/5/

j0hnik 16.06.2017 22:58

Если сам контент надо завернуть то вот
http://jsfiddle.net/fvcmev6t/6/

Vladinir34 17.06.2017 16:44

Цитата:

Сообщение от j0hnik
Если сам контент надо завернуть то вот
http://jsfiddle.net/fvcmev6t/6/

А можно сделать так, чтоб в зависимости от выбранной вкладки (их всего 6) выводился определенный текст через скрипт, А в неактивных удалялся контент?

Пример:

вкладка 1 активная: тут контент 1
Вкладка 2: пусто

Вкладка 1: пусто
Вкладка 2 активная: тут контент 2

Я пытался что то соорудить, вот этим скрывается контент как надо: .replaceWith(" ");

Получатся нужно чтобы в активную вкладку выводился определенный контент из скрипта, а у неактивных вкладок было удаление контента .replaceWith(" ");

j0hnik 18.06.2017 17:55

Цитата:

Сообщение от Vladinir34 (Сообщение 455749)
А можно сделать так, чтоб в зависимости от выбранной вкладки (их всего 6) выводился определенный текст через скрипт, А в неактивных удалялся контент?

Пример:

вкладка 1 активная: тут контент 1
Вкладка 2: пусто

Вкладка 1: пусто
Вкладка 2 активная: тут контент 2

Я пытался что то соорудить, вот этим скрывается контент как надо: .replaceWith(" ");

Получатся нужно чтобы в активную вкладку выводился определенный контент из скрипта, а у неактивных вкладок было удаление контента .replaceWith(" ");

Для чего это? выполнять лишние операции. в плане скорости или экономии трафика вы не получите ничего, т.к. браузер до этого уже прочитает весь HTML.
Подгружать надо AJAX-ом.. или как нибудь еще. но не так


Часовой пояс GMT +3, время: 12:13.