Question

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

以下是链接列表：

  <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声明？

Answer 1

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

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

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

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

我希望，我理解你想要的东西;）

一个站点中所有人的面包屑导航

1 个答案: