1

簡単にスタイルを設定できるトグル ボタン ( jQuery Toggles ) を作成する、Simon Tabor によるこのハンサムなプラグインを見つけました。

それは素晴らしいことですが、残念ながら私は 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="イタリア語テキスト">

トグル ボタンが に設定されている場合のみ

class="toggle-on イタリア語アクティブ"

そしての

<div id="英語テキスト">

トグル ボタンが に設定されている場合のみ

class="toggle-on English active"

私はたくさんの試みをしましたが、私は常に失敗しています: それはイライラしています!

読んでいただき、ありがとうございます。

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()は、トグル状態に応じて実行される 2 つの関数です。

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

「ITA」状態の場合、および

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

「EN」状態の場合。

トグル プラグインのドキュメントを参照してください;)

ページをロードするときに英語の段落を非表示にすることを忘れないでください（$('#english-text').hide();または css :を使用display:none）

これがどのように見えるかの動作デモです: DEMO

それがあなたを助けることを願っています!

EDIT：ちなみに、あなたはただ使うことができます：

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

イタリア語と英語の段落を切り替えます。はるかに簡単ですが、ボタンの状態 (ITA または ENG) に関する情報は得られず、ボタンがクリックされたときだけがわかります。

于 2013-10-08T14:10:58.503 に答える