Javascript 如何创建单击事件以在不同的HTML页面上打开特定的引导选项卡？

我有两页。我的主页包含此页面中不同位置的链接，用于执行编辑配置文件、更改密码、上载配置文件图片等操作

主页“index.html”

我的第二个页面“accounts.html”使用引导导航选项卡

<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>

如何单击主页上的链接并在第二页上打开相应的引导选项卡

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

---

我认为您可以使用localStorage来实现此解决方案。首先，将单击index.html的所选选项卡的id保存到localStorage中。然后，在account.html上，您可以从localStorage获取值selected选项卡。这是样品，希望能对我的朋友有所帮助

-在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>

---

文档片段标识符是一个更好的选择，因为它们可以直接添加到href@Tomato32上面的代码似乎很接近。但是，我需要将active类添加到导航选项卡li和accounts.html上的关联选项卡窗格中，使其突出显示您所在的选项卡，并在选项卡窗格中显示正确的内容。@Al-76:可以。我将编辑我的解决方案。很抱歉最近的回复。@番茄。。非常感谢您再次查看此内容。不幸的是，一旦帐户页面加载，它就会删除活动的类。此外，它不会将“活动”添加到导航选项卡的li或打开相应的选项卡窗格。我很感激你的代码，因为它比我能做的要好：@Al-76:对不起，我的朋友。您可以澄清这一点，它会在帐户页面加载后删除活动类。也许我能帮你更好。

<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>