Question

试图寻找这个，但很难为我正在寻找的东西提出正确的条款。

基本上，我希望能够根据网址显示特定的网页状态（显示/隐藏div）。

我有一个包含3个div的单个页面，并且有一组单选按钮以相关div为目标，向其容器添加show / hide类，还修改地址栏中的URL以匹配当前视图。

示例：

本地主机：8888 /帐户/命令/历史
本地主机：8888 /帐户/命令/重复
本地主机：8888 /帐户/命令/反馈

唯一存在的文件是/account/orders/index.php。

我对这些按钮的标记是这样的：

<div class="sidebar__group">
  <div class="tab__group is--vertical" data-target="#ordersContent">
    <label class="tab" value="history">
      <input type="radio" name="ordersTabs">
      <span><a class="link">Order History</a></span>
    </label>
    <label class="tab" value="recurring">
      <input type="radio" name="ordersTabs">
      <span><a class="link">Recurring Orders</a></span>
    </label>
    <label class="tab" value="feedback">
      <input type="radio" name="ordersTabs">
      <span><a class="link">Rate Vendors</a></span>
    </label>
  </div>
</div>

.tab__group的data-target属性是容器div，它根据每个无线电输入的值获取正确的show / hide div。该值是附加到URL的值。

这是控制它的jQuery：

$('.tab').on('click', function(e){
  var targetState = $(this).attr('value');
  if (!$(this).children('input').is(':checked')){
      var states = $(this).parents('.tab__group').find('.tab').map(function(){
        return $(this).attr('value');
      }), string = [];

      $.each(states, function(index, value){
          var state = value;
          string.push(state);
      });

      var classes = string.join(' '),
      groupTarget = $(this).closest('.tab__group').data('target');
      $(groupTarget).removeClass(classes);
      $(groupTarget).addClass(targetState);
      e.preventDefault();
      $(this).children('input').prop("checked", true);

      // Add the appropriate state to the current url
      window.history.pushState("string", "Title", targetState);
  }
});

奇怪的是，当我在本地运行时，一切正常。但是当在实时服务器上运行时，我收到“未找到”错误。我猜这是因为上面的URL实际上没有任何内容。有没有办法强制它去主index.php页面？

Answer 1

所以解决方案是使用mod_rewrite。这是一个示例htaccess文件：

RewriteEngine On
RewriteCond %{REQUEST_URI} path/
RewriteRule ^path/to/state$ path/to/ [L]

^path/to/state$是将被重写的网址path/to/。它被重写为。

具有由URL控制的多个状态的单页

1 个答案: