Question

我试图让Bootstrap选项卡面板在点击按钮时重新加载，而不是只显示标签。所以点击＆＃34;办公室＆＃34;选项卡将重新加载页面，然后显示#office选项卡。我把它全部工作......除了页面重新加载。它永远不会发射。

HTML

    <div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
    <li role="presentation" class="active">
        <a id="office" href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
  </div>

</div>

JS

jQuery("#office").click(function(e){
            console.log("clicked")
            e.preventDefault();
            window.location.replace = "http://www.myurl.com#office";
            console.log("after")

            return false;

        });

https://jsfiddle.net/zxLt5z2r/

更新了Codepen：

https://codepen.io/anon/pen/QOqrvY

Answer 1

您返回false并且还调用preventDefault（）;

jQuery("#office").click(function(e){
            console.log("clicked")
            window.location.href = "http://www.myurl.com#office";
            console.log("after")
        });

另外，请使用window.location.href = "http://example.com/new_url";

Answer 2

Location.replace（）是一个以URL作为参数的函数。

尝试：

window.location.replace("http://www.myurl.com#office");

JS Bootstrap选项卡式面板，单击时加载URL

2 个答案: