图像单击和捕获值上的Bootstrap Wizard下一个选项卡

时间：2017-03-16 17:53:00

标签： javascript jquery twitter-bootstrap pyjade twitter-bootstrap-wizard

我有一个带有 Twitter Bootstrap Wizard 的表单，我有几个图像，当我选择一个时，我必须在本地存储该值并转到下一个标签（o._nextTab）。 / p>

当我点击图片时，它应该转到下一个标签，但目前无效。

这是个主意：

(function($) {
"use strict";
var sdm = function() {
    var o = this; 
    $(document).ready(function() {
        o.initialize();
    });
};
var p = sdm.prototype;
p.initialize = function() {
  this._initChartWizard();
};


//Chart Wizard form
p._initChartWizard = function () {
  var o = this;
  $('#chartwizard').bootstrapWizard({
    onTabShow: function (tab, navigation, index) {
      o._handleTabShow(tab, navigation, index, $('#chartwizard'));
      o._nextTab(o);
    }
  });

  $('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });

}

p._handleTabShow = function (tab, navigation, index, wizard) {
  var total = navigation.find('li').length;
  var current = index + 0;
  var percent = (current / (total - 1)) * 100;
  var percentWidth = 100 - (100 / total) + '%';

  navigation.find('li').removeClass('done');
  navigation.find('li.active').prevAll().addClass('done');

  wizard.find('.progress-bar').css({ width: percent + '%' });
  $('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}

p._nextTab = function(wizard) {
  $('.nextT').click(function(){
    wizard('next');
  });
}

window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):

会有几张图片，我想点击图片然后转到下一个标签，或者至少选择图片，然后当我点击下一步获取值时。

我正在使用 pyjade 来创建模板，所以如果有任何想法或者使用javascript，那将是受欢迎的。

<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
  <div class="form-wizard-nav">
    <div class="progress">
      <div class="progress-bar progress-bar-primary"></div>
    </div>
    <ul class="nav nav-justified">
      <li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
      </li>
      <li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
      </li>
      <li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
      </li>
      <li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <div class="row">
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body chartOption nexT"><a href="javascript:void(0);"><img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-chart.png" class="img-responsive"/></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab-pane"><br/><br/>
      <p>Tab 2</p>
    </div>
    <div id="tab3" class="tab-pane"><br/><br/>
      <p>Tab 3</p>
    </div>
    <div id="tab4" class="tab-pane"><br/><br/>
      <p>Tab 4</p>
    </div>
  </div>
  <div class="pager wizard">
    <li class="previous first"><a href="javascript:void(0);">First</a>
    </li>
    <li class="previous"><a href="javascript:void(0);">Previous</a>
    </li>
    <li class="next last"><a href="javascript:void(0);">Last</a>
    </li>
    <li class="next"><a href="javascript:void(0);">Next</a>
    </li>
  </div>
</form>
</div>

4 个答案:

答案 0 :(得分：2)

我已为每张图片添加了onclick="seltab(this);，点击该图片会转到相应的标签页，同时也会捕获所点击的内容。

＆＃13;
＆＃13; 
(function($) {
  "use strict";
  var sdm = function() {
    var o = this;
    $(document).ready(function() {
      o.initialize();
    });
  };
  var p = sdm.prototype;
  p.initialize = function() {
    this._initChartWizard();
  };


  //Chart Wizard form
  p._initChartWizard = function() {
    var o = this;
    $('#chartwizard').bootstrapWizard({
      onTabShow: function(tab, navigation, index) {
        o._handleTabShow(tab, navigation, index, $('#chartwizard'));
        o._nextTab(o);
      }
    });

    $('#chartwizard').bootstrapWizard({
      'nextSelector': '.chartOption'
    });

  }

  p._handleTabShow = function(tab, navigation, index, wizard) {
    var total = navigation.find('li').length;
    var current = index + 0;
    var percent = (current / (total - 1)) * 100;
    var percentWidth = 100 - (100 / total) + '%';

    navigation.find('li').removeClass('done');
    navigation.find('li.active').prevAll().addClass('done');

    wizard.find('.progress-bar').css({
      width: percent + '%'
    });
    $('.form-wizard-horizontal').find('.progress').css({
      'width': percentWidth
    });
  }

  p._nextTab = function(wizard) {
    $('.nextT').click(function() {
      wizard('next');
    });
  }

  window.boostbox = window.boostbox || {};
  window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):

function seltab(obj) {
  var elem = obj.getAttribute('datahref')
  var click_img = obj.firstChild.getAttribute('src')
  var justifiedElems = document.getElementsByClassName('nav-justified')[0].getElementsByTagName("li");
  for (var i = 0; i < justifiedElems.length; i++) {
    if (justifiedElems[i].firstChild.getAttribute('href') == '#' + elem) {
      justifiedElems[i].firstChild.click()
    }
  }
  console.log("You Clicked " + click_img + " " + elem)
}
＆＃13; 
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/prettify.css">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/js/bootstrap.min.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/prettify.js"></script>


<form role="form" id="chartwizard" novalidate="novalidate" class="form-horizontal form-bordered">
  <div class="form-wizard-nav">
    <div class="progress">
      <div class="progress-bar progress-bar-primary"></div>
    </div>
    <ul class="nav nav-justified">
      <li class="active"><a href="#tab1" data-toggle="tab"><span class="step"></span><span class="title">Chart Type</span></a>
      </li>
      <li><a href="#tab2" data-toggle="tab"><span class="step"></span><span class="title">Data Source</span></a>
      </li>
      <li><a href="#tab3" data-toggle="tab"><span class="step"></span><span class="title">Data</span></a>
      </li>
      <li><a href="#tab4" data-toggle="tab"><span class="step"></span><span class="title">Chart Options</span></a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <div class="row">
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body chartOption nexT">
              <a href="javascript:void(0);" onclick="seltab(this); return false;" datahref="tab2"><img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body">
              <a href="javascript:void(0);" onclick="seltab(this); return false;" datahref="tab3"><img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body">
              <a href="javascript:void(0);" onclick="seltab(this); return false;" datahref="tab4"><img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab-pane">

      <div align="center">
        tab2
        <img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
    </div>
    <div id="tab3" class="tab-pane">

      <div align="center">
        tab3
        <img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
    </div>
    <div id="tab4" class="tab-pane">
      <div align="center">
        tab4
        <img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
    </div>
  </div>
  <div class="pager wizard">
    <li class="previous first"><a href="javascript:void(0);">First</a>
    </li>
    <li class="previous"><a href="javascript:void(0);">Previous</a>
    </li>
    <li class="next last"><a href="javascript:void(0);">Last</a>
    </li>
    <li class="next"><a href="javascript:void(0);">Next</a>
    </li>
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

这里我假设三个图像对应三个标签

答案 1 :(得分：0)

您的代码中存在两个问题。

  1. {j}中<div class="box-body chartOption nexT">
    2. 中$('.nextT').click(function(){中的类名 nexT 应为 nextT
  2. wizard不是函数，因此您无法像wizard('next');那样调用它。您可以利用其nextSelector（推荐）或代替$(".next:not(.last)").click();。

    3. 解决这些问题后，您的代码应如下所示：

    <body>
    <div id="chartwizard" class="form-wizard form-wizard-horizontal">
        <form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
            <div class="form-wizard-nav">
                <div class="progress">
                    <div class="progress-bar progress-bar-primary"></div>
                </div>
                <ul class="nav nav-justified">
                    <li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
                    </li>
                    <li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
                    </li>
                    <li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
                    </li>
                    <li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
                    </li>
                </ul>
            </div>
            <div class="tab-content">
                <div id="tab1" class="tab-pane active">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="box">
                                <div class="box-body chartOption nexTT">
                                    <a href="javascript:void(0);"><img src="img/head.png" class="img-responsive" /></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="box">
                                <div class="box-body">
                                    <a href="javascript:void(0);"><img src="img/head.png" class="img-responsive" /></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="box">
                                <div class="box-body">
                                    <a href="javascript:void(0);"><img src="img/head.png" class="img-responsive" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab2" class="tab-pane"><br/><br/>
                    <p>Tab 2</p>
                </div>
                <div id="tab3" class="tab-pane"><br/><br/>
                    <p>Tab 3</p>
                </div>
                <div id="tab4" class="tab-pane"><br/><br/>
                    <p>Tab 4</p>
                </div>
            </div>
            <div class="pager wizard">
                <li class="previous first"><a href="javascript:void(0);">First</a>
                </li>
                <li class="previous"><a href="javascript:void(0);">Previous</a>
                </li>
                <li class="next last"><a href="javascript:void(0);">Last</a>
                </li>
                <li class="next"><a href="javascript:void(0);">Next</a>
                </li>
            </div>
        </form>
    </div>
    <script>
        (function ($) {
            "use strict";
            var sdm = function () {
                var o = this;
                $(document).ready(function () {
                    o.initialize();
                });
            };
            var p = sdm.prototype;
            p.initialize = function () {
                this._initChartWizard();
            };


            //Chart Wizard form
            p._initChartWizard = function () {
                var o = this;
                $('#chartwizard').bootstrapWizard({
                    onTabShow: function (tab, navigation, index) {
                        o._handleTabShow(tab, navigation, index, $('#chartwizard'));
                        console.log(this);
                        o._nextTab(o);
                    }
                });

                $('#chartwizard').bootstrapWizard({
                    'nextSelector': '.chartOption'
                });

            }

            p._handleTabShow = function (tab, navigation, index, wizard) {
                var total = navigation.find('li').length;
                var current = index + 0;
                var percent = (current / (total - 1)) * 100;
                var percentWidth = 100 - (100 / total) + '%';

                navigation.find('li').removeClass('done');
                navigation.find('li.active').prevAll().addClass('done');

                wizard.find('.progress-bar').css({
                    width: percent + '%'
                });
                $('.form-wizard-horizontal').find('.progress').css({
                    'width': percentWidth
                });
            }

            p._nextTab = function (wizard) {
                $('.nexTT').click(function () {
                    $(".next:not(.last)").click();
                });
            }

            window.boostbox = window.boostbox || {};
            window.boostbox.sdm = new sdm;
        }(jQuery)); // pass in (jQuery):
    </script>
</body>

    请参阅http://vinceg.github.io/twitter-bootstrap-wizard/

答案 2 :(得分：0)

以下将保存所做的选择（并前进到下一个选项卡）。选择按选项卡索引存储在对象中。

它保存了具有类saveAndMoveNext的元素的元素ID。这个类也是触发＆＃34;保存它并移动到下一个标签＆＃34;。

的内容

运行时最好点击＆＃34;整页＆＃34;链接。我对pyjade并不熟悉，但我试图将它与问题中的内容保持一致：

＆＃13;
＆＃13; 
// shim to execute code as written
var p = {};

var chosenSelections = {}; // stores each selection by tab #

//Chart Wizard form
p._initChartWizard = function() {
  var o = this;
  var $chartwizard = $('#chartwizard'); // cache

  $chartwizard.bootstrapWizard({
    onTabShow: function(tab, navigation, index) {
      o._handleTabShow(tab, navigation, index, $chartwizard);
    }
  });

  // set up selection saving and moving to next tab
  $('#chartwizard').find(".saveAndMoveNext").click(function() {
    o._saveAndChangeTab($chartwizard, this)
  });

}

p._handleTabShow = function(tab, navigation, index, wizard) {
  var total = navigation.find('li').length;
  var current = index + 0;
  var percent = (current / (total - 1)) * 100;
  var percentWidth = 100 - (100 / total) + '%';

  navigation.find('li').removeClass('done');
  navigation.find('li.active').prevAll().addClass('done');

  wizard.find('.progress-bar').css({
    width: percent + '%'
  });
  $('.form-wizard-horizontal').find('.progress').css({
    'width': percentWidth
  });
}

p._saveAndChangeTab = function(wizard, el) {
  var currentTab = wizard.bootstrapWizard('currentIndex');

  chosenSelections[currentTab] = el.id;
  
  console.log("Selection saved by tab index:",chosenSelections);
  
  wizard.bootstrapWizard('next'); // move to next tab
}

//window.boostbox = window.boostbox || {};
//window.boostbox.sdm = new sdm;
//}(jQuery)); // pass in (jQuery):

// A shim to execute code as written
$(document).ready(function() {
  p._initChartWizard();
});
＆＃13; 
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="chartwizard" class="form-wizard form-wizard-horizontal">
  <form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
    <div class="form-wizard-nav">
      <div class="progress">
        <div class="progress-bar progress-bar-primary"></div>
      </div>
      <ul class="nav nav-justified">
        <li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
        </li>
        <li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
        </li>
        <li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
        </li>
        <li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
        </li>
      </ul>
    </div>
    <div class="tab-content">
      <div id="tab1" class="tab-pane active">
        <div class="row">
          <div class="col-sm-3">
            <div class="box">
              <div class="box-body">
                <a href="javascript:void(0);"><img id="image1" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                    class="img-responsive" /></a>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="box">
              <div class="box-body">
                <a href="javascript:void(0);"><img id="image2" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                    class="img-responsive" /></a>
              </div>
            </div>
          </div>
          <div class="col-sm-3">
            <div class="box">
              <div class="box-body">
                <a href="javascript:void(0);"><img id="image3" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                    class="img-responsive" /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="tab2" class="tab-pane">
        <br/>
        <br/>
        <p>Tab 2</p>
      </div>
      <div id="tab3" class="tab-pane">
        <br/>
        <br/>
        <p>Tab 3</p>
      </div>
      <div id="tab4" class="tab-pane">
        <br/>
        <br/>
        <p>Tab 4</p>
      </div>
    </div>
    <div class="pager wizard">
      <li class="previous first"><a href="javascript:void(0);">First</a>
      </li>
      <li class="previous"><a href="javascript:void(0);">Previous</a>
      </li>
      <li class="next last"><a href="javascript:void(0);">Last</a>
      </li>
      <li class="next"><a href="javascript:void(0);">Next</a>
      </li>
    </div>
  </form>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

＆＃13;
＆＃13; 
(function($) {
"use strict";
var sdm = function() {
    var o = this; 
    $(document).ready(function() {
        o.initialize();
    });
};
var p = sdm.prototype;
p.initialize = function() {
  this._initChartWizard();
};


//Chart Wizard form
p._initChartWizard = function () {
  var o = this;
  $('#chartwizard').bootstrapWizard({
    onTabShow: function (tab, navigation, index) {
      o._handleTabShow(tab, navigation, index, $('#chartwizard'));
      o._nextTab(o);
    }
  });

  $('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
  
   $('img').on('click', function() {
     var step = $(this).attr('data-step');
     $('#chartwizard').bootstrapWizard('show', step);
  });

}

p._handleTabShow = function (tab, navigation, index, wizard) {
  var total = navigation.find('li').length;
  var current = index + 0;
  var percent = (current / (total - 1)) * 100;
  var percentWidth = 100 - (100 / total) + '%';

  navigation.find('li').removeClass('done');
  navigation.find('li.active').prevAll().addClass('done');

  wizard.find('.progress-bar').css({ width: percent + '%' });
  $('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}

p._nextTab = function(wizard) {
  $('.nextT').click(function(){
    wizard('next');
  });
}

window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
  <div class="form-wizard-nav">
    <div class="progress">
      <div class="progress-bar progress-bar-primary"></div>
    </div>
    <ul class="nav nav-justified">
      <li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
      </li>
      <li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
      </li>
      <li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
      </li>
      <li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <div class="row">
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body chartOption nexT"><a href="javascript:void(0);"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=1&w=50&h=50" class="img-responsive" data-step="1"/></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body"><a href="javascript:void(0);"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=2&w=51&h=50" class="img-responsive" data-step="2"/></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body"><a href="javascript:void(0);"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=3&w=52&h=50" class="img-responsive"  data-step="3"/></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab-pane"><br/><br/>
      <p>Tab 2</p>
    </div>
    <div id="tab3" class="tab-pane"><br/><br/>
      <p>Tab 3</p>
    </div>
    <div id="tab4" class="tab-pane"><br/><br/>
      <p>Tab 4</p>
    </div>
  </div>
  <div class="pager wizard">
    <li class="previous first"><a href="javascript:void(0);">First</a>
    </li>
    <li class="previous"><a href="javascript:void(0);">Previous</a>
    </li>
    <li class="next last"><a href="javascript:void(0);">Last</a>
    </li>
    <li class="next"><a href="javascript:void(0);">Next</a>
    </li>
  </div>
</form>
</div>
＆＃13;
＆＃13;
＆＃13;

您可以使用$(this).index()找到点击图片的索引，然后调用$('#wizard').bootstrapWizard('show', index);

为了获得更大的灵活性，您可以向img添加data-step属性并指定要转到的步骤。例如<img src="image-source" data-step="2" />。然后单击获取此属性的值并将其传递给此调用$('#rootwizard').bootstrapWizard('show', value);

您可以通过在初始化向导时将单击处理程序附加到图像来执行此操作

p._initChartWizard = function() {
  var o = this;
  var $chartwizard = $('#chartwizard'); // cache

  $chartwizard.bootstrapWizard({
    onTabShow: function(tab, navigation, index) {
      o._handleTabShow(tab, navigation, index, $chartwizard);
    }
  });

  // set up selection saving and moving to next tab
  $('#chartwizard').find(".saveAndMoveNext").click(function() {
    o._saveAndChangeTab($chartwizard, this)
  });

  $('img').on('click', function() {
     var step = $(this).attr('data-step');
     $chartwizard.bootstrapWizard('show', step);
  });

}

或者，您可以在点击时获得向导当前索引并显示下一个

$('img').on('click', function(){
   var index = $('#chartwizard').bootstrapWizard('currentIndex'),
       totalTabs = $('#chartwizard').bootstrapWizard('navigationLength');
    if(index === (totalTabs - 1)) {
        index = 0;
    } else {
        index += 1;
    }
   $('#chartwizard').bootstrapWizard('show', index);
});

或者只需在向导上调用下一个

$('img').on('click', function(){
    $('#chartwizard').bootstrapWizard('next');
})
相关问题
最新问题