使活动图标在激活后成为链接，如果未激活则不是链接答案

【问题标题】：Make an active icon a link once activated, not a link if not activated使活动图标在激活后成为链接，如果未激活则不是链接
【发布时间】：2016-10-24 17:06:37
【问题描述】：

我正在使用我在网上找到的引导模板来创建一个简单的多步骤表单。该模板顶部有一些图标，用于标识用户在表单完成过程中的位置。一旦他们完成表单步骤并选择下一步按钮，顶部的图标图将前进到下一步，并且上一步现在已激活（颜色已更改）。

我希望能够在用户完成该步骤后使这些图标成为活动链接，以便他们可以通过单击图标快速导航回上一步。激活图标后，如何使图标成为指向其相关步骤的活动链接。下面是我的html和js和jsfiddle链接。

HTML：

<body>
  <!-- Top content -->
  <div class="top-content">
    <div class="container">

      <div class="row">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
          <form role="form" action="" method="post" class="f1">

            <h3>Register To Our App</h3>
            <p>Fill in the form to get instant access</p>
            <div class="f1-steps">
              <div class="f1-progress">
                <div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
              </div>
              <div class="f1-step active">
                <div class="f1-step-icon"><i class="fa fa-user"></i></div>
                <p>about</p>
              </div>
              <div class="f1-step">
                <div class="f1-step-icon"><i class="fa fa-key"></i></div>
                <p>account</p>
              </div>
              <div class="f1-step">
                <div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
                <p>social</p>
              </div>
            </div>

            <fieldset>
              <h4>Tell us who you are:</h4>
              <div class="form-group">
                <label class="sr-only" for="f1-first-name">First name</label>
                <input type="text" name="f1-first-name" placeholder="First name..." class="f1-first-name form-control" id="f1-first-name">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-last-name">Last name</label>
                <input type="text" name="f1-last-name" placeholder="Last name..." class="f1-last-name form-control" id="f1-last-name">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-about-yourself">About yourself</label>
                <textarea name="f1-about-yourself" placeholder="About yourself..." class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
              </div>
              <div class="f1-buttons">
                <button type="button" class="btn btn-next">Next</button>
              </div>
            </fieldset>

            <fieldset>
              <h4>Set up your account:</h4>
              <div class="form-group">
                <label class="sr-only" for="f1-email">Email</label>
                <input type="text" name="f1-email" placeholder="Email..." class="f1-email form-control" id="f1-email">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-password">Password</label>
                <input type="password" name="f1-password" placeholder="Password..." class="f1-password form-control" id="f1-password">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-repeat-password">Repeat password</label>
                <input type="password" name="f1-repeat-password" placeholder="Repeat password..." class="f1-repeat-password form-control" id="f1-repeat-password">
              </div>
              <div class="f1-buttons">
                <button type="button" class="btn btn-previous">Previous</button>
                <button type="button" class="btn btn-next">Next</button>
              </div>
            </fieldset>

            <fieldset>
              <h4>Social media profiles:</h4>
              <div class="form-group">
                <label class="sr-only" for="f1-facebook">Facebook</label>
                <input type="text" name="f1-facebook" placeholder="Facebook..." class="f1-facebook form-control" id="f1-facebook">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-twitter">Twitter</label>
                <input type="text" name="f1-twitter" placeholder="Twitter..." class="f1-twitter form-control" id="f1-twitter">
              </div>
              <div class="form-group">
                <label class="sr-only" for="f1-google-plus">Google plus</label>
                <input type="text" name="f1-google-plus" placeholder="Google plus..." class="f1-google-plus form-control" id="f1-google-plus">
              </div>
              <div class="f1-buttons">
                <button type="button" class="btn btn-previous">Previous</button>
                <button type="submit" class="btn btn-submit">Submit</button>
              </div>
            </fieldset>

          </form>
        </div>
      </div>

    </div>
  </div>

</body>

JavaScript：

function scroll_to_class(element_class, removed_height) {
  var scroll_to = $(element_class).offset().top - removed_height;
  if ($(window).scrollTop() != scroll_to) {
    $('html, body').stop().animate({
      scrollTop: scroll_to
    }, 0);
  }
}

function bar_progress(progress_line_object, direction) {
  var number_of_steps = progress_line_object.data('number-of-steps');
  var now_value = progress_line_object.data('now-value');
  var new_value = 0;
  if (direction == 'right') {
    new_value = now_value + (100 / number_of_steps);
  } else if (direction == 'left') {
    new_value = now_value - (100 / number_of_steps);
  }
  progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}

jQuery(document).ready(function() {

  /*
      Form
  */
  $('.f1 fieldset:first').fadeIn('slow');

  $('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
    $(this).removeClass('input-error');
  });

  // next step
  $('.f1 .btn-next').on('click', function() {
    var parent_fieldset = $(this).parents('fieldset');
    var next_step = true;
    // navigation steps / progress steps
    var current_active_step = $(this).parents('.f1').find('.f1-step.active');
    var progress_line = $(this).parents('.f1').find('.f1-progress-line');

    // fields validation
    parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
      if ($(this).val() == "") {
        $(this).addClass('input-error');
        next_step = false;
      } else {
        $(this).removeClass('input-error');
      }
    });
    // fields validation

    if (next_step) {
      parent_fieldset.fadeOut(400, function() {
        // change icons
        current_active_step.removeClass('active').addClass('activated').next().addClass('active');
        // progress bar
        bar_progress(progress_line, 'right');
        // show next step
        $(this).next().fadeIn();
        // scroll window to beginning of the form
        scroll_to_class($('.f1'), 20);
      });
    }

  });

  // previous step
  $('.f1 .btn-previous').on('click', function() {
    // navigation steps / progress steps
    var current_active_step = $(this).parents('.f1').find('.f1-step.active');
    var progress_line = $(this).parents('.f1').find('.f1-progress-line');

    $(this).parents('fieldset').fadeOut(400, function() {
      // change icons
      current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
      // progress bar
      bar_progress(progress_line, 'left');
      // show previous step
      $(this).prev().fadeIn();
      // scroll window to beginning of the form
      scroll_to_class($('.f1'), 20);
    });
  });

  // submit
  $('.f1').on('submit', function(e) {

    // fields validation
    $(this).find('input[type="text"], input[type="password"], textarea').each(function() {
      if ($(this).val() == "") {
        e.preventDefault();
        $(this).addClass('input-error');
      } else {
        $(this).removeClass('input-error');
      }
    });
    // fields validation

  });


});

JSFiddle 链接：https://jsfiddle.net/93r5y1g3/2/

【问题讨论】：

我的回答对您有帮助吗？如果没有，我还能做些什么吗？
对不起，我刚刚回到这个话题。是的，它有帮助。我是 js 和 jQuery 的新手，所以一个快速的问题......所以如果我想让图标（一旦激活）导航到相关的步骤，你提到要向字段集添加一个标识符。因此，我可以将
之类的内容添加到第一个，>fieldset id="acctInfo"> 到第二个，
到最后一个。现在，我如何使用 js 让链接在它们被激活时工作而不是在它们没有被激活时工作？再次感谢您的帮助。
@vastlysuperiorman 你好，只是想看看你是否有机会阅读我的回复评论并有任何建议。再次感谢您。
对此感到抱歉。有一个孩子，所以我已经离线几个星期了。我会尽快更新我的答案。
添加了更新的示例。如果这对您有用，请继续选择它作为正确答案。 :)

标签： javascript jquery html css

【解决方案1】：

我个人不会制作图标链接，因为根据您当前的工作流程，您不希望实际导航到不同的页面。你只想执行一些javascript。

相反，将 cursor: pointer; 添加到可点击项目的 css 中，并为符合条件的图标上的 click 事件添加事件侦听器。

在这里，我添加了将鼠标悬停在可点击图标上时的光标变化。 https://jsfiddle.net/93r5y1g3/4/

它只是在css中设置了以下内容：

.f1-step.activated > .f1-step-icon {
    cursor: pointer;
}

关于字段集之间的实际变化，看起来你只是在做相对移动。您的代码淡出被单击按钮的父字段集并淡出next()。如果您要允许在步骤之间跳转，则需要进行两项重大更改：

您需要每个字段集都有一个从图标引用的标识符（这样当您单击图标时可以找到相关的字段集）。
您需要为要允许用户单击的每个图标上的“单击”事件添加一个事件侦听器。将侦听器添加到所有图标加载可能是最简单的，然后如果不允许用户单击图标，则让您的函数返回 false。

希望这会有所帮助。

编辑：

我已经更新了 jsfiddle (https://jsfiddle.net/93r5y1g3/8/)，其中包含在字段集之间跳转的工作示例。您只能跳转到活动字段集。

以下是我所做的更改：

为每个字段集添加了id 标签。
为图标添加了data-fieldset，以便每个图标都可以链接到一个字段集。
添加了一个简单的事件侦听器，以在单击图标时更改活动图标和字段集。请注意，如果单击尚未激活的图标，则不会发生任何事情。

这是听众：

// Go to step
$('.f1-step-icon').on('click', function(e){
  var current_step = {
      fieldset: $($(".f1-step.active").children('.f1-step-icon').data('fieldset')),
      circle: $(".f1-step.active")
  }
  var jump_to_step = {
      fieldset: $($(this).data('fieldset')),
      circle: $(this).parent()
  }
  if (! jump_to_step.circle.hasClass("activated")) {
      // Right now, this prevents users jumping forward.
      // If you want jumping forward to be allowed, you need to add
      // some logic to leave a step unfinished and force a return to it.
      return;
  }
  current_step.fieldset.fadeOut(400, function() {
    current_step.circle.removeClass('active').addClass('activated')
    jump_to_step.circle.addClass('active');
    jump_to_step.fieldset.fadeIn();
    scroll_to_class($('.f1'), 20);
  });
});

【讨论】：