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

时间:2016-10-21 06:53:14

标签: javascript php jquery html redirect

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

基本上,我希望能够根据网址显示特定的网页状态(显示/隐藏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页面?

1 个答案:

答案 0 :(得分:0)

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

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

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