2015-05-18 2 views
3

Мне действительно нужна помощь для вкладок jquery. Я хотел бы перейти на конкретную вкладку через внешнюю привязку (http://www.url.com#content2), навигационная ссылка активируется и отображается правильная вкладка. Другие страницы HTMLОткрытие пользовательской вкладки jquery с привязкой привязки

<a href="#b">B Title</a> | <a href="#bb">B Title</a> 

HTML

<div class="tabs-container"> 
    <ul class="tabs"> 
     <li class="current"><h4><a href="javascript:void();" data-tab="tab1" title="Title 1">Title 1</a></h4></li> 
     <li><h4><a href="javascript:void();" data-tab="tab2" title="Title 2">Title 2</a></h4></li> 
    </ul> 

    <div class="border-box group"> 
     <div id="tab1" class="panel group showing" style="display: block;"> 
      a 
     </div> 
     <div id="tab2" class="panel group" style="display: none;"> 
      <a id="b">B title A<a><br> 
information...... <br><br/> 
<a id="bb">B title B<a><br> 
information...... <br><br/> 
     </div> 
    </div> 
</div> 

Javascript

<script> 
(function(a){a.fn.yiw_tabs=function(b){var c={tabNav:"ul.tabs",tabDivs:".containers",currentClass:"current"};b&&a.extend(c,b);this.each(function(){var b=a(c.tabNav,this),f=a(c.tabDivs,this),e;f.children("div").hide();e=0<a("li."+c.currentClass+" a",b).length?"#"+a("li."+c.currentClass+" a",b).data("tab"):"#"+a("li:first-child a",b).data("tab");a(e).show().addClass("showing").trigger("yit_tabopened");a("li:first-child a",b).parents("li").addClass(c.currentClass);a("a",b).click(function(){if(!a(this).parents("li").hasClass("current")){var e= 
"#"+a(this).data("tab");a(this);a("li."+c.currentClass,b).removeClass(c.currentClass);a(this).parents("li").addClass(c.currentClass);a(".showing",f).fadeOut(200,function(){a(this).removeClass("showing").trigger("yit_tabclosed");a(e).fadeIn(200).addClass("showing").trigger("yit_tabopened")})}return!1})})}})(jQuery); 
</script> 

Как я редактировать? Спасибо за помощь.

+0

уменьшенная JavaScript? !!! –

+0

да, используя в wordpress с коротким кодом – user2612903

+0

моя точка была .. публикация minified js не поможет нам понять, что происходит на самом деле. Есть способы выяснить, но это затрудняет. –

ответ

1

использование JQuery this.hash;

$(document).ready(function(){ 
 
\t $('#tab1').show(); 
 
\t $('.tabs li a.current').addClass('current'); 
 
\t $('.tabs li a').click(function() { 
 
\t \t var tabDivId = this.hash; \t \t \t \t \t \t \t  
 
\t \t 
 
\t \t $('.tabs li a').removeClass('current'); 
 
\t \t $(this).addClass('current'); 
 
\t \t $('.panel').hide(); 
 
\t \t $(tabDivId).fadeIn(); 
 
\t \t return false; 
 
\t }); 
 
});
.panel{ 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li><h4><a href="#tab1" data-tab="tab1" title="Title 1">Title 1</a></h4></li> 
 
    <li><h4><a href="#tab2" data-tab="tab2" title="Title 2">Title 2</a></h4></li> 
 
</ul> 
 

 
<div class="border-box group"> 
 
    <div id="tab1" class="panel group showing"> 
 
     a 
 
    </div> 
 
    <div id="tab2" class="panel group"> 
 
     b 
 
    </div> 
 
</div>

+0

спасибо, что помогли, но не работали для меня. – user2612903

+0

Вы добавляете плагин запроса в свой html? –

+0

да, я добавил, вкладки работают, но внешняя привязка еще не работает. Скопируйте свой код и протестируйте локально. – user2612903

1

Замените значение HREF атрибута идентификатора соответствующей вкладке и использовать ниже код ...

HTML

<ul class="tabs"> 
<li class="current"> 
<h4><a data-tab="tab1" title="Title 1" href="#tab1">Title 1</a></h4> 
</li> 
<li> 

<h4><a data-tab="tab2" title="Title 2" href="#tab2">Title 2</a></h4> 
</li> 

</ul> 

<div class="border-box group"> 
<div id="tab1" class="panel group showing" style="display: block;"> a </div> 
<div id="tab2" class="panel group" style="display: none;"> b </div> 
</div> 

Jquery

$('.tabs a').click(function(){ 
var attr = $(this).attr('href') 
$('.tabs li').removeClass('current'); 

$(this).closest('li').addClass('current'); 

$('.border-box div').hide(); 
$(attr).show(); 

}) 

CSS

.border-box div { display:none;} 
.showing { display:block;} 

Вы можете спросить, если требуется какая-либо помощь ..

+0

благодарю вас за помощь. но не работает внешняя внешняя ссылка – user2612903

+0

Есть ли у вас какая-нибудь скрипка того, что вы хотите? –

Смежные вопросы