从html

Question

假设，在我的网页中，我有一个侧边栏菜单，其中包含三个选项卡，例如：通知，新闻和事件。如果单击任何选项卡，则对应的项目在页面中的特定位置处可见，该位置使用display：none属性保持隐藏状态。编码格式如下：

<div class="sidenav">
            <div class="panel-header-silver">
                <h2>Upcoming</h2>
            </div>
            <div class="sidenav-item sidenav-active" data-tab="notices" >
                General Notices
            </div>

            <div class="sidenav-item " data-tab="News" >
                News
            </div>
            <div class="sidenav-item" data-tab="Events">
                Events
            </div>
        </div>

现在，我想链接到另一页上的任何选项卡。这意味着，如果我单击一个链接，它将激活新闻选项卡（例如）。有什么方法可以实现此功能？

Answer 1

尝试使用以下代码。您需要在单击按钮时传递要激活的Element的“数据标签”值。

// Page 1.html Script

function activeButton(value) {
  window.location.href = '2.html#active=' + value;
}

// Page 2.html Script
$(document).ready(function() {
  var activeTab = getUrlParameter('active');
  console.log(activeTab);
  $(".sidenav").find(`[data-tab='${activeTab}']`).addClass("active");

});

var getUrlParameter = function getUrlParameter(sParam) {
  var results = new RegExp('[\?&#]' + sParam + '=([^&#]*)').exec(window.location.href);
  if (results == null) {
    return null;
  } else {
    return decodeURI(results[1]) || 0;
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="sidenav">
  <div class="panel-header-silver">
    <h2>Upcoming</h2>
  </div>
  <div class="sidenav-item sidenav-active" data-tab="notices">
    General Notices
  </div>

  <div class="sidenav-item " data-tab="News">
    News
  </div>
  <div class="sidenav-item" data-tab="Events">
    Events
  </div>
</div>

<div class="container">
  <a class="btn btn-primary" href="javascript:activeButton('News')">  Active </a>
</div>

编辑：我也修改了上面的函数，也使用“＃”在URL中获取参数名称。