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");