Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2015, 10:47
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

Переход по ссылки на закладку
Добрый день.
На странице размещены Табы
<script type="text/javascript">
$("ul.div-nav").ready(function() {
  $("#daily-wrapper .webpart").hide();
  $("#daily-wrapper .webpart.statys").fadeIn('slow');
  $("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});
  $("ul.div-nav li.choice").click(function(){$(this).siblings("ul.div-nav li").removeClass("activated")});
  $("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});
  $("ul.div-nav li.show-statys").click(function(){$("#daily-wrapper .webpart.statys").fadeIn('slow')});
  $("ul.div-nav li.show-comanda").click(function(){$("#daily-wrapper .webpart.comanda").fadeIn('slow')});
  $("ul.div-nav li.show-kv_cell").click(function(){$("#daily-wrapper .webpart.kv_cell").fadeIn('slow')});
  $("ul.div-nav li.show-plan_mec").click(function(){$("#daily-wrapper .webpart.plan_mec").fadeIn('slow')});
  $("ul.div-nav li.show-egened_PF").click(function(){$("#daily-wrapper .webpart.egened_PF").fadeIn('slow')});
  $("ul.div-nav li.show-kontrol_srok").click(function(){$("#daily-wrapper .webpart.kontrol_srok").fadeIn('slow')});
  $("ul.div-nav li.show-kontrol_bud").click(function(){$("#daily-wrapper .webpart.kontrol_bud").fadeIn('slow')});
});
</script>


На каждом Табе выставляю закладки в виде:
<a href="#fkp"> закладка</a>

При переходе на закладу попадаю на первый Таб с признаком activated, а хотелось бы попадать именно в конкретное место где стоит закладка.
Спасибо.

Последний раз редактировалось Castromen, 16.11.2015 в 10:51.
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2015, 11:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Castromen,
ready используется некорректно, click слишком много ... может макет ... минимальный?
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2015, 13:03
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

<html>
<head>
<script type="text/javascript" src="../SiteAssets/SitePages/Оружейный_FitOut_Команда/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("ul.div-nav").ready(function() {
  $("#daily-wrapper .webpart").hide();
  $("#daily-wrapper .webpart.statys").fadeIn('slow');
  $("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});
  $("ul.div-nav li.choice").click(function(){$(this).siblings("ul.div-nav li").removeClass("activated")});
  $("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});
  $("ul.div-nav li.show-statys").click(function(){$("#daily-wrapper .webpart.statys").fadeIn('slow')});
  $("ul.div-nav li.show-comanda").click(function(){$("#daily-wrapper .webpart.comanda").fadeIn('slow')});
  $("ul.div-nav li.show-kv_cell").click(function(){$("#daily-wrapper .webpart.kv_cell").fadeIn('slow')});
  $("ul.div-nav li.show-plan_mec").click(function(){$("#daily-wrapper .webpart.plan_mec").fadeIn('slow')});
  $("ul.div-nav li.show-egened_PF").click(function(){$("#daily-wrapper .webpart.egened_PF").fadeIn('slow')});
  $("ul.div-nav li.show-kontrol_srok").click(function(){$("#daily-wrapper .webpart.kontrol_srok").fadeIn('slow')});
  $("ul.div-nav li.show-kontrol_bud").click(function(){$("#daily-wrapper .webpart.kontrol_bud").fadeIn('slow')});
});
</script>
<style>
....
</style>
</head>
<div id="daily-wrapper"><font color="#008000"><span style="font-size:24px">Fit Out</span></font>
<ul class="div-nav">
<li class="choice show-statys activated" style="width:103px;height:110px"><img alt="icon_tep.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/FitOut_Команда/icon_tep.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:80px;height:69px;border-top:0px;border-right:0px"><br>
Статус/ТЭП</li>
<li class="choice show-comanda" style="width:103px;height:110px"><img alt="icon_komanda.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/FitOut_Команда/icon_komanda.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:72px;height:66px;border-top:0px;border-right:0px"><br>
Команда проекта</li>
<li class="choice show-kv_cell" style="width:103px;height:110px"><img alt="icon_kv_cel.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/FitOut_Команда/icon_kv_cel.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:63px;height:66px;border-top:0px;border-right:0px"><br>
Квартальные цели</li>
</ul>

<div class="content">

<div class="calendar">
<h2>Calendar</h2>

<!--Статус\ТЭП-->
<div class="webpart statys" style="width: 866px;">
<table width="100%" border="0" cellspacing="0"><tbody><tr><!--Картинка--><td valign="top" style="height: 150px; width: 186px;">
<img src="/sites/peo/%D0%98%D0%A12/css/obj/oryg.jpg" >
</td>
</tr>
</table>
</div>

<!--Команда проекта-->
<div class="webpart comanda" style="width: 866px;">
<table width="100%" border="0" cellspacing="0"><tbody><tr><!--Картинка--><td valign="top" style="height: 150px; width: 186px;">
<img src="/sites/peo/%D0%98%D0%A12/css/obj/oryg.jpg" >
</td>
</tr>
</table>
</div>

<!--Квартальные цели-->
<div class="webpart kv_cell" style="width: 866px;">
<table width="100%" border="0" cellspacing="0"><tbody><tr><!--Картинка--><td valign="top" style="height: 150px; width: 186px;">
<img src="/sites/peo/%D0%98%D0%A12/css/obj/oryg.jpg" >
</td>
</tr>
</table>
</div>

</div>


<html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2015, 14:11
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

Castromen,
а style?
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2015, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от Castromen
Переход по ссылки на закладку
это?
Заставить работать скрипт для навигации по странице при переходе извне
Ответить с цитированием
  #6 (permalink)  
Старый 16.11.2015, 16:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

открывашка на всякий случай
<html>
<head>  <meta charset="utf-8">
<style type="text/css">
.webpart {
   height: 300px;
   background-color: #D3D3D3;
}
li.activated {
  background-color: #1E90FF;
}
  li{
    float: left;
  }
.content  {
  margin-top: 150px;
}


</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $("ul.div-nav li"), b = $(".webpart");
       b.toggle();
       s.click(function() {
         var indx = s.index(this), p = b.eq(indx);
         s.not(this).removeClass("activated");
         $(this).toggleClass("activated");
         b.not(p).fadeOut('fast') ;
         p.toggle('slow')
      });
     s.first().click()

});


  </script>

</head>
<div id="daily-wrapper"><font color="#008000"><span style="font-size:24px">Fit Out</span></font>
<ul class="div-nav">
<li class="choice show-statys" style="width:103px;height:110px"><img alt="icon_tep.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/FitOut_Команда/icon_tep.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:80px;height:69px;border-top:0px;border-right:0px"><br>
Статус/ТЭП</li>
<li class="choice show-comanda" style="width:103px;height:110px"><img alt="icon_komanda.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/FitOut_Команда/icon_komanda.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:72px;height:66px;border-top:0px;border-right:0px"><br>
Команда проекта</li>
<li class="choice show-kv_cell" style="width:103px;height:110px"><img alt="icon_kv_cel.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/FitOut_Команда/icon_kv_cel.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:63px;height:66px;border-top:0px;border-right:0px"><br>
Квартальные цели</li>
</ul>

<div class="content">

<div class="calendar">
<h2>Calendar</h2>

<!--Статус\ТЭП-->
<div class="webpart statys" style="width: 866px;">Статус\ТЭП
<table width="100%" border="0" cellspacing="0"><tbody><tr><!--Картинка--><td valign="top" style="height: 150px; width: 186px;">
<img src="/sites/peo/%D0%98%D0%A12/css/obj/oryg.jpg" >
</td>
</tr>
</table>
</div>

<!--Команда проекта-->
<div class="webpart comanda" style="width: 866px;">Команда проекта
<table width="100%" border="0" cellspacing="0"><tbody><tr><!--Картинка--><td valign="top" style="height: 150px; width: 186px;">
<img src="/sites/peo/%D0%98%D0%A12/css/obj/oryg.jpg" >
</td>
</tr>
</table>
</div>

<!--Квартальные цели-->
<div class="webpart kv_cell" style="width: 866px;">Квартальные цели
<table width="100%" border="0" cellspacing="0"><tbody><tr><!--Картинка--><td valign="top" style="height: 150px; width: 186px;">
<img src="/sites/peo/%D0%98%D0%A12/css/obj/oryg.jpg" >
</td>
</tr>
</table>
</div>

</div>
 </div>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 17.11.2015, 10:20
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

Спасибо за оптимизацию кода.
Все вставил но не могу понять в чем проблема.

Создаю ссылку извне.
<a href="/sites/peo/ИС2/SitePages/test.aspx#fkp">123</a>

Во втором табе пишу якорь
<div class="webpart kv_cell" style="width: 866px;">
<a name="fkp"></a>

Но что то не срабатывает.
Ответить с цитированием
  #8 (permalink)  
Старый 17.11.2015, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Castromen,
как в чём - див скрыт кто его откроет, при заходе на страницу?
Ответить с цитированием
  #9 (permalink)  
Старый 17.11.2015, 10:45
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

Уважаемый Рони, сможете написать решение, совсем слаб JS а начальник требует.
Ответить с цитированием
  #10 (permalink)  
Старый 17.11.2015, 11:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Castromen,
вам же ссылки дали выше как это делается ...
добавить красное во все li
<li class="choice show-comanda" style="width:103px;height:110px" data-hash="fkp">
заменить строку 32 на
var hash = window.location.hash;
    if(hash) {s.filter('[data-hash="'+hash+'"]').click()}
    else {s.first().click()}

Последний раз редактировалось рони, 17.11.2015 в 12:07.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный переход к элементу по внешней ссылке deniskutovskiy jQuery 13 16.10.2015 22:30
Как открыть все сгенерированные ссылки с общим id в списке одним кликом? malefikus13 Общие вопросы Javascript 12 22.07.2015 08:52
Как назначить событие при фокусе на все ссылки —сразу производить переход (по ссылке) developer Элементы интерфейса 4 27.10.2013 13:35
Ссылки внутри другой ссылки Madgeniy Events/DOM/Window 4 11.08.2012 14:58
ссылки получали стиль "visited" только на время сессии alexandr_poskrobka Серверные языки и технологии 7 10.03.2010 08:48