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

Question

我正在尝试让 Bootstrap 选项卡式面板在单击按钮时重新加载，而不仅仅是显示选项卡。因此，单击“office”选项卡将重新加载页面，然后显示#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");