Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2016, 00:27
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

Как сделать код на jqery более правильный?
Здравствуйте. Сделал сот такую штуку для сайта https://jsfiddle.net/yx608nb3/1/ . Правда, получился костыль. Подскажите, как можно этот код оптимизировать, чтобы он был короче.
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2016, 00:47
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

https://jsfiddle.net/vlasenkofedor/82kSU/
как вариант
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2016, 01:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

drkrol,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .punkt {
  margin-right: 55px;
    font-size: 16px;
    color: #0060ff;
    border-bottom: 1px dashed #498eff;
    cursor: pointer;
}

.punkt:hover {
  border-bottom: 1px solid #0060ff;
}

.re-h, .re-h2 {
  color: #aaa;
}

.nav-a {
  height: 100px;
}

.nav-a .light {
    margin-bottom: 15px;
}

.active {
  border-bottom: none !important;
  color: #aaaaaa !important;
  cursor: default;
}
 .none {
display:none;
}

.in {
  font-size: 24px;
  margin-bottom: 140px;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$(".nav-a").on("click",".punkt",function(event) {
var el = $(this), text = "/ "+el.text(),
indx = el.addClass('active').siblings(".punkt").removeClass('active').add(el).index(el),
next = el.parent().next();
$("div", next).addClass("none").eq(indx).removeClass("none");;
$(".light span",el.parent()).text(text);
})
});
  </script>
</head>

<body>
<div class="nav-a mot"><div class="s36 light">БЛОК 1 <span class="re-h">/ ОПИСАНИЕ</span></div>
      <span class="h-a1 active punkt pt1">Описание</span>
      <span class="h-a2 punkt pt1">Тарифы</span>
      <span class="h-a3 punkt pt1">Подать заявку</span>
    </div>
    <div class="in">
    <div class="h-b-1">Информация о БЛОК 1</div>
    <div class="h-b-2 none">Тарифы БЛОКА 1</div>
    <div class="h-b-3 none">Форма подачи заявки на БЛОК 1</div>
    </div>
    		<div class="nav-a mot"><div class="s36 light">БЛОК 2 <span class="re-h2">/ ЦЕНЫ</span></div>
      <span class="h-a4 active punkt pt2">Цены</span>
      <span class="h-a5 punkt pt2">Зарегистрировать</span>
    </div>
    <div class="in">
    <div class="h-b-4">Цены на блок 2</div>
    <div class="h-b-5 none">Регистрация блока 2</div>
    </div>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2016, 01:39
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

рони,
Здравствуй. Спасибо, а подскажи, что делать, если внутри h-b блоков находятся свои div? https://jsfiddle.net/0m4naLrc/1/
Ответить с цитированием
  #5 (permalink)  
Старый 14.07.2016, 01:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

drkrol,
$(">div", next)
https://jsfiddle.net/0m4naLrc/2/
лучше если бы все группы блоков имели одинаковые классы

Последний раз редактировалось рони, 14.07.2016 в 01:56.
Ответить с цитированием
  #6 (permalink)  
Старый 14.07.2016, 02:29
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

Сообщение от рони Посмотреть сообщение
drkrol,
$(">div", next)
https://jsfiddle.net/0m4naLrc/2/
лучше если бы все группы блоков имели одинаковые классы
Да классы разные, потому что костыль бы тогда не работал. Подскажи, а можно ко всему этому добавить плавности? С display none плавности не добиться, но можно добиться плавности через opacity. Посмотри: https://jsfiddle.net/0m4naLrc/3/ . Как сделать между появлением и исчезанием небольшую задержку, к примеру, в секунду?
Ответить с цитированием
  #7 (permalink)  
Старый 14.07.2016, 15:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от drkrol
Как сделать между появлением и исчезанием небольшую задержку, к примеру, в секунду?
.abs{
  transition-delay: 1s;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такую страницу mortido Элементы интерфейса 11 02.10.2014 07:20
Сделать код функцией и вызвать её в другой функции. light Общие вопросы Javascript 1 19.09.2014 20:18
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24