相关疑难解决方法(0)

是否有一种无插件的方式通过jQuery(或没有)检索查询字符串值？

如果是这样,怎么样？如果没有,是否有插件可以这样做？

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

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

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;

            }
    });
});

我们有一些页面使用ajax来加载内容,并且在某些情况下我们需要深入链接到页面.而不是链接到"用户"并告诉人们点击"设置",能够将人们链接到user.aspx#settings是有帮助的

为了让人们能够为我们提供正确的部分链接(用于技术支持等),我已将其设置为在点击按钮时自动修改URL中的哈希值.唯一的问题当然是,当发生这种情况时,它还会将页面滚动到此元素.

有没有办法禁用它？以下是我到目前为止这样做的方法.

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash=$(this).attr("id")
            //return false;
    });
});

我曾希望return false;会阻止页面滚动 - 但它只会使链接无法正常工作.所以现在只是注释掉,所以我可以导航.

有任何想法吗？

我试图通过Bootstrap 3在刷新时保持选定的选项卡处于活动状态.尝试并检查了一些问题已经在这里被问过,但没有为我工作.不知道我哪里错了.这是我的代码

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>

Javascript:

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' …

我正在使用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更改,但选项卡不起作用.

对此有何解决方案？

我正在使用Bootstrap的nav-tabs以下设置:

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
  <div class="tab-pane active in" id="home">
    <form id="tab">
        <label>Name:</label>
        <input type="text" value="fooBar" class="input-xlarge">
    </form>
  </div>
  <div class="tab-pane fade" id="profile">
    <form id="tab2">
        <a href="#home">Home</a>
    </form>
  </div>
</div>

如您所见,我的profile标签中有一个链接,链接到第一个标签.单击锚点会更改URL栏中的URL,但不会跳转到特定选项卡.

然后我注意到通常无法直接链接到选项卡,因此我在Twitter Bootstrap选项卡中添加了以下代码:转到页面重新加载或超链接上的特定选项卡:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash …

我有一个看起来像这样的导航栏:

<ul class="nav navbar-nav">
    <li class="active">
        <a href="#personal" data-toggle="tab">Personal Info</a>
    </li>
    <li>
        <a href="#con-sib" data-toggle="tab">Contacts/Siblings</a>
    </li>
    <li>
        <a href="#state-fed" data-toggle="tab">State/Federal</a>
    </li>
    <li>
        <a href="#eth" data-toggle="tab">Ethnicity</a>
    </li>
    <li>
        <a href="#placement" data-toggle="tab">Placement</a>
    </li>
    <li>
        <a href="#medical" data-toggle="tab">Medical</a>
    </li>
    <li>
        <a href="#sch-release" data-toggle="tab">School Release</a>
    </li>
</ul>

我有一些javascript代码设置正确的活动选项卡:

$(document).ready(function() {
    var hash = window.location.hash;

    if (hash) {
        var selectedTab = $('.nav li a[href="' + hash + '"]');
        selectedTab.trigger('click', true);
        }
    });

上面的代码运行良好(忽略第二个参数.trigger()- 它在我的应用程序的其他地方使用),但有一点需要注意.加载页面时,将加载第一个选项卡,然后在此之后快速显示正确的选项卡.

如何在显示正确的选项卡之前阻止显示第一个选项卡？

所以我有一个带有深度嵌套的评论系统.我正在使用bootstraps javascript文件,但只有崩溃和动画css样式.所以我不使用nav-tab等等

所有有回复的评论都有一个按钮.该数字1是指父项的ID(ID为1的注释的回复).

<a class="btn" type="button" data-toggle="collapse" href="#replies_1">X replies</a>

然后我有一个div,这是父评论的所有孩子的容器

<div class="collapse" id="replies_1">

当我点击锚点时,正如您所猜测的那样,这个div会附加到类中in并很好地转换为打开并显示注释子项.

除了滚动部分,我尝试了一件有用的东西

$(document).ready(function(){
    if(window.location.hash != "") {
        $('a[href="' + window.location.hash + '"]').click();
    }
});

这打开了正确的选项卡,这很棒.但是,由于选项卡具有collapse包含css规则的类display:none;并添加了内联规则display: none;

现在,我的脚本无法滚动到正确的位置,因为折叠的元素具有这些规则.

虽然,我真的不需要滚动到回复,但父母.

所以我真正需要的是滚动到另一个锚ID,它具有相同的后缀ID,但前缀不同,但仍然打开回复标签,就像我上面的代码一样

由于孩子们在id为的标签内replies_{id},我可以滚动到父级,这是一个ulid 为的项目comment_{id}

该ul如下所示:<ul class="comment__item" id="comment_{id}">

我在Wordpress网站上设置了Bootstrap 4选项卡,并希望链接到另一个页面链接中的特定选项卡:

index.php文件:

<a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More</a>

Services.php:

<!-- Nav tabs -->
            <ul class="nav nav-tabs text-xs-center" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
                        <h4>Innovation &<br/>Investigation</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
                        <h4>Electronic<br/>Engineering</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
                        <h4>Manufacturing</h4>
                    </a>
                </li>
            </ul>

<!-- Tab panes -->
            <div class="tab-content clearfix">

                <!-- Innovation -->
                <div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
                    <div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- …

Javascript/jQuery新手在这里.这个问题之前已被多次询问过,但我无法实现任何解决方案并使其在我的单页网站上运行.我的代码如下.到目前为止,我尝试过以下各种变体(没有成功):

• 从同一页面上的URL链接到特定的Twitter引导选项卡
• 使用Bootstrap的nav-tabs从另一个选项卡跳转到特定选项卡
• 有没有办法让BootStrap标签通过URL激活？
• Twitter Bootstrap选项卡:转到页面重新加载或超链接上的特定选项卡
• 在bootstrap 3中显示带有外部链接的选项卡和onclick
• 如何从其他页面上的超链接链接twitter bootstrap选项卡
• Bootstrap链接到带有url的选项卡
• 外部链接到选项卡,选项卡不更改,Bootstrap 3.3.5
• 转到不同页面链接上的特定选项卡单击并切换活动类

以下是我最接近解决方案的内容.我错过了什么？

$(document).load(function() {
  $('#section-A a').click(function(e) {
    e.preventDefault();
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<section id="section-A">

  <blockquote class="blockquote">
    <p>Some text here ...
      <a href="#tab-1">Tab 1 hyperlink text</a> blablabla
      <a href="#tab-2">Tab 2 hyperlink text</a> and blabla
      <a href="#tab-3">Tab 3 hyperlink text</a> and blabla
      <a href="#tab-4">Tab 4 hyperlink text</a> and bla.
    </p>
  </blockquote>

</section>


<div id="section-B">

  <ul class="nav nav-pills">
    <li class="active"><a …