Question

我尝试在BOOTSTRAP COLLAPSE中实现引导选项卡和内部选项卡。

对于标签，我实施了：

<script type="text/javascript">
$(document).ready(function()
 {  
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos    
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
 if(location.hash) 
  {
     $('a[href=' + location.hash + ']').tab('show');         
  }


//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{
    location.hash = $(e.target).attr('href').substr(1);
    scrollTo(0,0);      
});



//Actualiza el URL con el anchor o ancla del tab al darle clic
 /* Update hash based on tab, basically restores browser default behavior to
 fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event) 
  {
    location.hash = this.getAttribute("href");
  });


//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */   
$(window).on('popstate', function() 
{
  //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
  //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  var anchor = location.hash;
  $('a[href=' + anchor + ']').tab('show');

});   

});//Fin OnReady
</script>

但每当我点击COLLAPSE时，页面都会向上滚动。无论如何，我可以有效地使用它们。

这是链接：http://custmr.co.uk/industry-specific/

点击＆＃34;房地产＆＃34;后，我们就可以崩溃了。

提前致谢

Answer 1

你错过了阻止“锚”默认事件;

例如：

$(document.body).on("click", "a[data-toggle]", function(event){
    event.preventDefault();
    location.hash = this.getAttribute("href");
  });

FYI

http://api.jquery.com/event.preventdefault/

锚元素中的“事件点击”默认调用与<a href="#">some foo</a>

相同的页面

没有可爱的人们可以通过电子邮件发送电子邮件来获取更多信息。

如何同时实现bootstrap Tabs和Collapse菜单？

1 个答案: