使用codeigniter单击选项卡时更改引导选项卡网址base_url

Question

在引导选项卡上，我希望能够在单击选项卡时更改网址。

每个标签都有它使用笨BASE_URL自己的HREF，目前我使用data-target=""更改选项卡，但我需要能够更改URL以及

问题：我怎样才能改变URL时，我引导选项卡上单击以出#因为我用data-target=""

如果我点击编辑标签上应该将URL更改为

http://project.com/user/1/edit

<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
<ul class="nav nav-tabs" role="tablist"> 
    <?php if ($page == 'profile') {?> 
    <li role="presentation" class="active"> 
    <a href="<?php echo base_url('user/' .$user_id. '/profile');?>" aria-controls="profile" role="tab" data-toggle="tab" data-target="#profile" aria-expanded="false">Profile</a> 
    </li> 
    <?php } else {?> 
    <li role="presentation"> 
    <a href="<?php echo base_url('user/' .$user_id. '/profile');?>" aria-controls="profile" role="tab" data-toggle="tab" data-target="#profile" aria-expanded="false">Profile</a> 
    </li> 
    <?php }?> 
    <?php if ($page == 'activity') {?> 
    <li role="presentation" class="active"> 
    <a href="<?php echo base_url('user/' .$user_id. '/activity');?>" aria-controls="messages" role="tab" data-target="#messages" data-toggle="tab">Activity</a> 
    </li> 
    <?php } else {?> 
    <li role="presentation"> 
    <a href="<?php echo base_url('user/' .$user_id. '/activity');?>" aria-controls="messages" role="tab" data-target="#messages" data-toggle="tab">Activity</a> 
    </li> 
    <?php }?> 
    <?php if ($page == 'edit') {?> 
    <li role="presentation" class="active"> 
    <a href="<?php echo base_url('user/' .$user_id. '/edit');?>" aria-controls="settings" role="tab" data-target="#settings" data-toggle="tab">Settings</a> 
    </li> 
    <?php } else {?> 
    <li role="presentation"> 
    <a href="<?php echo base_url('user/' .$user_id. '/edit');?>" aria-controls="settings" role="tab" data-target="#settings" data-toggle="tab">Settings</a> 
    </li> 
    <?php }?> 
</ul> 


<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane" id="profile">1</div> 
    <div role="tabpanel" class="tab-pane" id="messages">2</div> 
    <div role="tabpanel" class="tab-pane" id="settings">2</div> 
</div> 
</div> 
</div> 

Answer 1

可以使用HTML5 History API。类似于下面的代码片段应该工作。

$(function() { 

    // capture click event on the tab 
    $("a[role='tab']").on("click", function(event) { 

    // stop the link from loading the new page 
    event.preventDefault(); 

    // edit the current page url/title 
    history.pushState("object or string", "Page title", $(this).attr("href")); 
    }); 
});