Форум

Castromen · #1 (**permalink**) 16.11.2015, 10:47

Добрый день.
На странице размещены Табы

<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, а хотелось бы попадать именно в конкретное место где стоит закладка.
Спасибо.

рони · #2 (**permalink**) 16.11.2015, 11:18

Castromen,
ready используется некорректно, click слишком много ... может макет ... минимальный?

Castromen · #3 (**permalink**) 16.11.2015, 13:03

<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>

Mess4me · #4 (**permalink**) 16.11.2015, 14:11

Castromen,
а style?

рони · #5 (**permalink**) 16.11.2015, 16:37

Сообщение от Castromen

Переход по ссылки на закладку

это?
Заставить работать скрипт для навигации по странице при переходе извне

рони · #6 (**permalink**) 16.11.2015, 16:40

открывашка на всякий случай

<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>

Castromen · #7 (**permalink**) 17.11.2015, 10:20

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

Создаю ссылку извне.
<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

Castromen,
как в чём - див скрыт кто его откроет, при заходе на страницу?

Castromen · #9 (**permalink**) 17.11.2015, 10:45

Уважаемый Рони, сможете написать решение, совсем слаб JS а начальник требует.

рони · #10 (**permalink**) 17.11.2015, 11:19

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()}

Форум

Справочник

Discord чат

Курсы javascript