0

我有一组链接，它们代表我显示和隐藏的页面的不同部分。

以下是链接列表：

  <ul id="breadcrumbs">

      <li><a href="index.php">Home</a></li>

      <li><a href="">1. Section1</a></li>

      <li><a href="">2. Section2</a></li>

      <li><a href="">3. Section3</a></li>

      <li><span></span></li>

    </ul>

它们的目的是说明用户在流程中的位置。

我希望能够使这些链接可点击，以便它们可用于导航目的。

但是，如果用户在上一步中没有选择相关内容，则用户应该不能跳过该步骤。而且，最终，一旦他们完成了所有必要的步骤，我想这样做，以便他们可以返回并查看之前的步骤。目前，当您按下后退按钮时，页面只是默认为主页，因为所有内容都在同一页面上。

我认为可能将一个类应用于我的 jquery 脚本中的“可见”部分，然后运行 ​​if/else 语句检查该类并处理链接会起作用，但事实证明这是低效的。

任何人都可以阐明解决此问题的最佳方法吗？也许在这里需要一个 SWITCH 语句？

4

1 回答 1

0

如果我理解正确，您的三个部分在同一页面上，并且您使用 javascript 隐藏或显示它们。

我还假设您有一些方法来验证用户选择，例如validateStep(stepNumber)返回true或false.

我建议您将类“bread-section”添加到a链接到的部分中，因此每次更改 step 时只需调用类似于以下的方法：

var updateBreadcrumb = function(){
  $('a.bread-section').each(function(i){
    $(this).toggleClass('enabled', validateStep(i))
  }
}

然后您可以对这些链接上的点击操作进行一些修改

var breadSectionClickAction = function(e){
  e.preventDefault();
  var $self = $(this);
  if(!$self.hasClass('enabled')) return;

  // do your show/hide section magic
  showSection($(a.bread-section).index($self)); // I supposed you have a method to show a specific section
}

$('a.bread-section').on('click', breadSectionClickAction);

并相应地设置链接样式：

.bread-section,
.bread-section:hover,
.bread-section:active {
  text-decoration: none;
  color: #999;
}

.bread-section.enable {
  text-decoration: underline;
  color: #5555ee;
}

.bread-section.enable:hover,
.bread-section.enable:active {
  text-decoration: underline;
}

我希望，我正确理解了你想要什么；）

于 2013-06-21T11:00:51.357 回答