Переход по ссылки на закладку
Добрый день.
На странице размещены Табы
<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,
ready используется некорректно, click слишком много ... может макет ... минимальный? |
<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>
|
Castromen,
а style? :cray: |
Цитата:
http://javascript.ru/forum/jquery/59...tml#post393339 |
открывашка на всякий случай
<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>
|
Спасибо за оптимизацию кода.
Все вставил но не могу понять в чем проблема. Создаю ссылку извне. <a href="/sites/peo/ИС2/SitePages/test.aspx#fkp">123</a> Во втором табе пишу якорь <div class="webpart kv_cell" style="width: 866px;"> <a name="fkp"></a> Но что то не срабатывает. |
Castromen,
как в чём - див скрыт кто его откроет, при заходе на страницу? |
Уважаемый Рони, сможете написать решение, совсем слаб JS а начальник требует.
|
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()}
|
Спасибо а ссылка будет выглядеть вот так?
<a href="/sites/peo/ИС2/SitePages/fin.aspx&[data-hash=fkp]" > </a> |
Цитата:
|
Заменил строчку 32 s.first().click() на это
<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')
});
var hash = window.location.hash;
hash && s.filter('[data-hash="'+hash+'"]').click()
});
</script>
Добавил data-hash="fkp" во все <li> <ul class="div-nav"> <li class="choice show-statys activated" style="width:103px;height:110px" data-hash="fkp1"><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" data-hash="fkp2"><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" data-hash="fkp3"><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> <li class="choice show-plan_mec" style="width:103px;height:110px" data-hash="fkp4"><img alt="icon_plan_mec.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_plan_mec.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:68px;height:64px;border-top:0px;border-right:0px"><br> План работ на месяц</li> <li class="choice show-egened_PF" style="width:109px;height:110px" data-hash="fkp5"><img alt="icon_egened_PO.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_egened_PO.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:58px;height:63px;border-top:0px;border-right:0px"><br> Еженедельный план/факт</li> <li class="choice show-kontrol_srok" style="width:100px;height:110px" data-hash="fkp6"><img alt="icon_kontrol_srok.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_kontrol_srok.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:71px;height:60px;border-top:0px;border-right:0px"><br> Контроль сроков</li> <li class="choice show-kontrol_bud" style="width:100px;height:110px" data-hash="fkp7"><img alt="icon_kont_bud.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_kont_bud.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:66px;height:63px;border-top:0px;border-right:0px"><br> Контроль бюджета</li> </ul> Создал ссылку <a href="/sites/peo/ИС2/SitePages/test.aspx#fkp4">123</a> Не работает, и еще заметил что когда заходишь просто на страницу содержание активного меню пропало. Когда было s.first().click() показ. контент. |
Цитата:
|
Рони спасибо огромное, но все же не работает в чем я туплю не пойму.
Ссылка <a href="/sites/peo/ИС2/SitePages/test.aspx#fkp">123</a> с другой страницы
<script type="text/javascript" src="../SiteAssets/SitePages/Оружейный_FitOut_Команда/jQuery/jquery-1.8.3.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')
});
var hash = window.location.hash;
if(hash) {s.filter('[data-hash="'+hash+'"]').click()}
else {s.first().click()}
});
</script>
Во все <il> все вставил <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" data-hash="fkp2222"><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" data-hash="fkp55"><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" data-hash="fkp"><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> <li class="choice show-plan_mec" style="width:103px;height:110px" data-hash="fkp777"><img alt="icon_plan_mec.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_plan_mec.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:68px;height:64px;border-top:0px;border-right:0px"><br> План работ на месяц</li> <li class="choice show-egened_PF" style="width:109px;height:110px" data-hash="fkp888"><img alt="icon_egened_PO.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_egened_PO.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:58px;height:63px;border-top:0px;border-right:0px"><br> Еженедельный план/факт</li> <li class="choice show-kontrol_srok" style="width:100px;height:110px" data-hash="fkp999"><img alt="icon_kontrol_srok.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_kontrol_srok.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:71px;height:60px;border-top:0px;border-right:0px"><br> Контроль сроков</li> <li class="choice show-kontrol_bud" style="width:100px;height:110px" data-hash="fkp0000"><img alt="icon_kont_bud.PNG" src="/sites/peo/ИС2/SiteAssets/SitePages/Оружейный_FitOut_Команда/icon_kont_bud.PNG" style="border-bottom:0px;border-left:0px;margin:5px;width:66px;height:63px;border-top:0px;border-right:0px"><br> Контроль бюджета</li> </ul> В таб все равно не переходит. переходит но на странице пусто. |
Castromen,
ссылку можно в личку |
| Часовой пояс GMT +3, время: 20:16. |