1

我发现 Simon Tabor 的这个漂亮的插件可以创建易于设置样式的切换按钮 ( jQuery Toggles )。

这太棒了，但不幸的是，我是 Javascript 和 jQuery 的新手，我无法将其用作显示/隐藏代码中其他位置的 <div> 的切换按钮。

所以，这就是问题所在：

<div class="container">

  <div class="well well-lg">
   <div class="page-header">
    <h1>MY SITE <small>My site subtitle</small></h1>
   </div>
  </div>

   <div class="panel panel-info">
    <div class="panel-heading">

     <div style="width: 100px; margin-left: auto;">
      <div class="toggle-light">
       <div class="toggle on">
        <div class="toggle-slide active">
         <div class="toggle-inner" style="width: 165px; margin-left: 0px;">
          <div class="toggle-on italian active" style="height: 35px; width: 82.5px; text-align: center; text-indent: -17.5px; line-height: 35px;">ITA</div>
          <div class="toggle-blob" style="height: 35px; width: 35px; margin-left: -17.5px;"></div>
         <div class="toggle-off english" style="height: 35px; width: 82.5px; margin-left: -17.5px; text-align: center; text-indent: 17.5px; line-height: 35px;">ENG</div>
        </div>
       </div>
      </div>
     </div>
    </div>

<script type="text/javascript">$('.toggle').toggles({on:true, text:{on:'ITA',off:'EN'}});</script>
</div>
</div>

<div class="row">
   <div class="left-sidebar col-md-3" role="complementary">

     <ul class="hidden-xs hidden-sm nav nav-pills nav-stacked">
       <li class="active"><a style="cursor: default;" href="javascript: void(0);"><i class="icon-fixed-width icon-dark icon-reorder icon-large"></i><strong>MAIN MENU</strong></a></li>
       <li>...</li>
       <li>...</li>
       <li>...</li>
       <li>...</li>
     </ul>

   </div>

<div class="col-md-9">

  <div id="italian-text">
  <h1>Il mio titolo in italiano</h1>
  <p>Il mio paragrafo in italiano</p>
  </div>

  <div id="english-text">
  <h1>My English title</h1>
  <p>My English paragraph</p>
  </div>

</div>

</div>
</div>

我想创建一个脚本以动态更改

<div id="意大利文本">

仅当切换按钮设置为

类=“切换意大利活跃”

和

<div id="英文文本">

仅当切换按钮设置为

class="切换英语活动"

我做了很多尝试，但我一直在失败：这令人沮丧！

感谢您的阅读和耐心。

4

1 回答 1

1

您可以使用

// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function (e, active) {
    if (active) {
        foo();
    } else {
        bar();
    }
});

根据切换状态执行的两个函数的位置foo()和位置，例如bar()

$('#english-text').hide();
$('#italian-text').show();

对于“ITA”状态，以及

$('#italian-text').hide();
$('#english-text').show();

对于“EN”状态。

请参阅切换插件文档；）

加载页面时不要忘记隐藏英文段落（使用$('#english-text').hide();或使用 css : display:none)

这是它的外观的工作演示： DEMO

希望对您有所帮助！

编辑：顺便说一句，您可以使用：

$('#english-text').hide();
$('.toggle').on('toggle', function (e) {
       $('#english-text, #italian-text').toggle();
});

切换意大利语和英语段落。这要容易得多，但是您不会获得有关按钮状态（ITA 或 ENG）的信息，您只会知道单击按钮的时间。

于 2013-10-08T14:10:58.503 回答