Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Переход по ссылки на закладку (https://javascript.ru/forum/misc/59548-perekhod-po-ssylki-na-zakladku.html)

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

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

Castromen 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 16.11.2015 14:11
Castromen,
а style? :cray:

рони 16.11.2015 16:37
Цитата:
Сообщение от Castromen
Переход по ссылки на закладку
это?
http://javascript.ru/forum/jquery/59...tml#post393339

рони 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 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>

Но что то не срабатывает.

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

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

рони 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()}


Часовой пояс GMT +3, время: 00:57.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице