javascript - 如何创建点击事件以在不同的 HTML 页面上打开特定的 Bootstrap 选项卡？

Question

我有两页。我的主页包含此页面内不同位置的链接，用于执行编辑个人资料、更改我的密码、上传个人资料图片等操作。

主页“index.html”

<a href="accounts.html">EDIT PROFILE</a>
<a href="accounts.html">CHANGE PASSWORD</a>
<a href="accounts.html">UPLOAD PHOTO</a>

我的第二页“accounts.html”使用 Bootstrap 导航选项卡。

<ul class="nav nav-tabs">
    <li class="active"><a href="#editProfile" data-toggle="tab"> Edit my profile</a></li>
    <li class=""><a href="#changePassword" data-toggle="tab">Change my Password</a></li>
    <li class=""><a href="#uploadPhoto" data-toggle="tab">Upload Photo</a></li>
</ul>

<div class="tab-pane" id="editProfile">
  BARK BARK
</div>
<div class="tab-pane" id="changePassword">
  WOFF WOFF
</div>
<div class="tab-pane" id="uploadPhoto">
  MEOW MEOW
</div>

如何单击主页上的链接并在第二页上打开正确的相应 Bootstrap 选项卡？

<!-- CLICK ON LINK WITHIN MAIN PAGE -->
$('#editProfile').on('click', function() {
    $('body').load( "accounts.html" ).find('active').removeClass('active');
    $('li.active').addClass('active');
});

Answer 1

我认为您可以使用 localStorage 来解决此问题。首先，将您在index.html 上单击的所选选项卡的id 保存到localStorage 中。然后，在 account.html 上，您可以从 localStorage 中获取值选择选项卡。这是示例，希望对 friend 有所帮助!

--在index.html中

<a href="#" id="editProfile">EDIT PROFILE</a>
<a href="#" id="changePass">CHANGE PASSWORD</a>
<a href="#" id="uploadPhoto">UPLOAD PHOTO</a>

$(document).ready(function(){
    $('a').on('click', function(e){
        localStorage.setItem('activeTab', $(e.target).attr('id'));
        window.location.replace("accounts.html"); 
    });
});

--在account.html中

<ul class="nav nav-tabs">
    <li class="active" id="lieditProfile">
        <a href="#editProfile" data-toggle="tab"> Edit my profile</a>
    </li>
    <li class="" id="lichangePass">
        <a href="#changePass" data-toggle="tab">Change my Password</a>
    </li>
    <li class="" id="liuploadPhoto">
    <a href="#uploadPhoto" data-toggle="tab">Upload Photo</a>
    </li>
</ul>

<div class="tab-content">
    <div id="editProfile" class="tab-pane fade in active">
      <h3>Edit the profile.</h3>      
    </div>
    <div id="changePass" class="tab-pane fade">
      <h3>Change Password</h3>      
    </div>
    <div id="uploadPhoto" class="tab-pane fade">
      <h3>Upload Photo</h3>      
    </div>    
</div>

<script>
    $(document).ready(function(){
        var activeTab = localStorage.getItem('activeTab');
        $('li').removeClass();
        $('#li'+ activeTab).addClass('active');
        $('.tab-pane').removeClass('in active');
        $('#' + activeTab).addClass('in active show');
    });
</script>