相关疑难解决方法(0)

我正在开发一个网页,其中我正在使用Twitter的Bootstrap Framework和他们的Bootstrap Tabs JS.除了一些小问题外,它的效果很好,其中一个是我不知道如何从外部链接直接转到特定的选项卡.例如:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

单击外部页面上的链接时,应分别转到"主页"选项卡和"注释"选项卡

我的网站上有一个滑动面板.

完成动画后,我就像这样设置哈希

function() {
   window.location.hash = id;
}

(这是一个回调,并且id之前已分配).

这很好用,允许用户为面板添加书签,也可以使非JavaScript版本工作.

但是,当我更新哈希时,浏览器会跳转到该位置.我想这是预期的行为.

我的问题是:我该如何防止这种情况？即如何更改窗口的哈希值,但如果哈希存在则浏览器不会滚动到该元素？某种event.preventDefault()事情？

我正在使用jQuery 1.4和scrollTo插件.

非常感谢!

更新

这是更改面板的代码.

$('#something a').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $('#slider').scrollTo(id, 800, {
        onAfter: function() {

            link.parents('li').siblings().removeClass('active');
            link.parent().addClass('active');
            window.location.hash = id;

            }
    });
});

我正在使用Twitter Bootstrap及其"标签".

我有以下代码:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

选项卡正常工作,但URL中没有添加#add,#edit,#delete.

当我删除data-toggleURL更改,但选项卡不起作用.

对此有何解决方案？

我目前正在使用Twitter Bootstrap的标签,并希望在用户发布数据和页面重新加载后选择相同的标签.

这是怎么做到的？

我当前对标签的调用如下所示:

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

我的标签:

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>

我正在为我的子页面产品使用TAB导航 - > ?p=products(参见下面的代码,网站是用HTML和PHP实现的)

问题:

例如,用户在第二个TAB中单击链接详细信息.然后他使用后退按钮.现在他回到产品网站,但不是在第二个标签中,而是在第一个标签中.

href="#section-2"如果用户返回产品页面,我想记住上次使用的标签(此处:).

有谁知道我怎么能意识到这一点？

<div id="tabs" class="tabs">
    <nav>
        <ul>
            <li><a href="#section-1" class="icon-cross"><span>Product 1</span></a></li>
            <li><a href="#section-2" class="icon-cross"><span>Product 2</span></a></li>
            <li><a href="#section-3" class="icon-cross"><span>Product 3</span></a></li>
            <li><a href="#section-4" class="icon-cross"><span>Product 4</span></a></li>
        </ul>
    </nav>

    <div class="content">

        <section id="section-1">
            <div class="tab-heading">
                <hr>
                <h2 class="intro-text text-center"><strong>Product 1</strong></h2>
                <hr>
            </div>
            ...
        </section>

        <section id="section-2">
            <div class="tab-heading">
                <hr>
                <h2 class="intro-text text-center"><strong>Product 2</strong></h2>
                <hr>
            </div>

            <a href="?p=details">Details</a>

        </section>
    </div>
</div>

我正在使用标签Ui的jquery工具,

现在我想在页面重新加载时保持选项卡.有没有办法做到这一点？下面是我的代码

$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});

我正在尝试使选定的选项卡在页面刷新时保持活动状态。但是当我无法在bootstrap 4中找到选项卡的任何解决方案时，我尝试根据bootstrap 3解决方案进行更改，但没有任何效果。请帮我。

的HTML

<ul class="nav my-nav1 nav-tabs mt-3 " id="myTab" role="tablist">
   <li class="nav-item border border-secondary rounded">
    <a class="nav-link active"  data-toggle="tab" href="#menu1">MENU1</a>
 </li>
 <li class="nav-item border border-secondary rounded">
   <a class="nav-link "  data-toggle="tab" href="#menu2">MENU2</a>
 </li>
</ul>

这是我正在使用的js，但是没有用。

JS

<script type="text/javascript">
  $(document).ready(function(){
  $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
  });
  var activeTab = localStorage.getItem('activeTab');
  if(activeTab){
    $('#myTab a[href="' + activeTab + '"]').tab('show');
  }
 });
</script> 

我的 HTML 代码是

<nav class="nav-sidebar">
<ul class="nav tabs" id="myTab">
  <li class="active" ><a  href="#tab3" data-toggle="tab" >Tabl 1</a> </li>                               
  <li class="tab2"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li ><a href="#tab3" data-toggle="tab">Tab 3</a></li>
  <li ><a href="#tab4" data-toggle="tab">Tab 4</a></li>
  <li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
</ul>

在我的 .ts 中

$('#myTab a').click(function(e) {
     e.preventDefault();
     $(this).tab('show');
   });
   $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
     var id = $(e.target).attr("href").substr(1);
     window.location.hash = id;
   });
   var hash = window.location.hash;
   $('#myTab a[href="' + hash + '"]').tab('show');

从 stackoverflow 和其他网站尝试了很多，但我最终发现 jquery 中不存在“tab”