1. ホーム
  2. 質問と答え
  3. クラスをクリックして授業を表示する

クラスをクリックして授業を表示する

2016-09-04 6 views
1

私はメニューシステムを作成しようとしています。トグル/ショーは、要素の内容をフェードインまたはトグルするのに適しています。したがって、ユーザーはページを変更する必要はありません。通常はajax（.load）を使用しますが、（cmsのために）テキストを保持する他のファイルは必要ありません。クラスをクリックして授業を表示する

カントは、それが動作するように取得するように見える：

https://jsfiddle.net/feto4ymt/7/

UPDATE

それでも主メニューシステムを壊し、それにネストされ、この二次メニューシステムは、現在中断されません。 https://jsfiddle.net/ph3ng2fo/35/

を

スライドショーの前に、別のメニューシステムを入れ子にしました。 メインリーにネストhttp://jsfiddle.net/3to0neLm/1 ： メイン（彼らは両方の仕事の罰金ソロ動作モードの各メニューシステム）の前

http://jsfiddle.net/feto4ymt/1

スクリプト

$(".tab_item2").click(function() { 
$(".tab_item2").removeClass(".tab_item_color2"); 
$(this).addClass(".tab_item_color2"); 
$(".tabitem2").show(".slide_content2"); 
});

出典

2016-09-04 alwayslearning

+0

「科学」のクリックで2222222を表示したい、「注文」などのクリックで333333 ...を表示したいのですか？ –

+0

はい、左の各メニュー項目には、その順番でliが表示されます。 – alwayslearning

+0

私はそれをスライドしようとしていたが、それはスライドするが別のシステムの中に入るが、壊れてしまう：私はちょうど3つのfiddelを作ったので、私は何をしようとしているのかを見ることができます 最初にここでスライドの要素です。 net/3to0neLm/1 2番目のスライドの嘘の要素を一度クリックすると：jsfiddle.net/feto4ymt/1 両方とも正常です。今すぐ最初のスライドの李の1つに2番目のスライドを入れてください（今は壊れています）：jsfiddle.net/ph3ng2fo/34 – alwayslearning

答えて

1

代わり.show使用.fadeToのこれが答えをguest271314するアニメーションをフェージング追加します。

\t $(".tab_item2").click(function() { 
 
\t $(".tab_item2").removeClass("tab_item_color2"); 
 
\t $(this).addClass("tab_item_color2"); 
 
\t $(".tabslider2 li").hide().eq($(this).index(".tab_item2")).fadeTo("slow", 1, function() { 
 
\t  // Animation complete. 
 
\t }); 
 
\t });
.tabbed_content { 
 
    background-color: #000; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-left: 10px; 
 
} 
 
.tabs { 
 
    position: relative; 
 
    width: 70%; 
 
    float: left; 
 
} 
 
.tabs .moving_bg { 
 
    background-color: #000; 
 
    background-image: url(/images/arrow_down_blue.png); 
 
    position: absolute; 
 
    width: 600px; 
 
    z-index: 7; 
 
    left: 0; 
 
    padding-bottom: 19px; 
 
    background-position: left bottom; 
 
    background-repeat: no-repeat; 
 
    margin: 0 auto; 
 
} 
 
.tab_item { 
 
    display: block; 
 
    float: left; 
 
    width: 150px; 
 
    color: #bbb; 
 
    text-align: center; 
 
    z-index: 8; 
 
    position: relative; 
 
    cursor: pointer; 
 
    font-family: 'SourceSansPro-SemiBold'; 
 
    font-size: 15px; 
 
    border-left: 1px solid #333; 
 
    padding: 8px 10px 8px 10px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.tab_item:hover { 
 
    color: #fff; 
 
    border-left: 1px solid #333; 
 
} 
 
.tab_item_color { 
 
    color: #fff; 
 
} 
 
.slide_content { 
 
    width: 1100px; 
 
    overflow: hidden; 
 
    margin: 26px 10px 0 5px; 
 
} 
 
.tabslider { 
 
    width: 6000px; 
 
    color: #222; 
 
    background: #fff; 
 
} 
 
.tabslider ul { 
 
    list-style: none; 
 
    width: 1100px; 
 
} 
 
.tabslider li 
 
/*media adjust */ 
 

 
{ 
 
    list-style: none; 
 
    float: left; 
 
    width: 1090px; 
 
    text-align: justify; 
 
    padding: 0 10px 0 0; 
 
    background-color: #fff; 
 
    color: #000; 
 
} 
 
.tabslider ul a { 
 
    color: #222; 
 
    text-decoration: none; 
 
} 
 
.tabslider ul a:hover { 
 
    color: #222; 
 
} 
 
.tabslider ul li { 
 
    padding-bottom: 7px; 
 
} 
 
.tabbed_content2 { 
 
    background-color: #fff; 
 
    width: 150px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 100%; 
 
    margin-left: 10px; 
 
    float: left; 
 
} 
 
.tabs2 { 
 
    position: relative; 
 
    width: 20%; 
 
} 
 
.tabs2 .moving_bg2 { 
 
    background-color: ; 
 
    background-image: url(/images/arrow_down_blue.png); 
 
    position: absolute; 
 
    width: 150px; 
 
    z-index: 7; 
 
    left: 0; 
 
    padding-bottom: 19px; 
 
    background-position: left bottom; 
 
    background-repeat: no-repeat; 
 
    margin: 0 auto; 
 
} 
 
.tab_item2 { 
 
    display: block; 
 
    float: left; 
 
    width: 150px; 
 
    color: #bbb; 
 
    text-align: center; 
 
    z-index: 8; 
 
    position: relative; 
 
    cursor: pointer; 
 
    font-family: 'SourceSansPro-SemiBold'; 
 
    font-size: 15px; 
 
    padding: 8px 10px 8px 10px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.tab_item2:hover { 
 
    color: #333; 
 
} 
 
.tab_item_color2 { 
 
    color: #333; 
 
} 
 
.slide_content2 { 
 
    width: 910px; 
 
    overflow: hidden; 
 
    margin: 26px 10px 0 5px; 
 
    float: left; 
 
} 
 
.tabslider2 { 
 
    width: 6000px; 
 
    color: #222; 
 
} 
 
.tabslider2 ul { 
 
    list-style: none; 
 
    width: 910px; 
 
} 
 
.tabslider2 li 
 
/*media adjust */ 
 

 
{ 
 
    list-style: none; 
 
    float: left; 
 
    width: 900px; 
 
    text-align: justify; 
 
    padding: 0 10px 0 0; 
 
    background-color: #fff; 
 
    color: #000; 
 
} 
 
.tabslider2 ul a { 
 
    color: #222; 
 
    text-decoration: none; 
 
} 
 
.tabslider2 ul a:hover { 
 
    color: #222; 
 
} 
 
.tabslider2 ul li { 
 
    padding-bottom: 7px; 
 
} 
 
.bodymainMax { 
 
    width: 100%; 
 
    background: none; 
 
    overflow: visible; 
 
    clear: both; 
 
    margin: 0 auto; 
 
    padding: 0 0 0 0; 
 
} 
 
.bodymainMaxS { 
 
    width: 100%; 
 
    background: none; 
 
    overflow: visible; 
 
    clear: both; 
 
    margin: 0 auto; 
 
    padding: 0 0 0 0; 
 
} 
 
.bblock1 { 
 
    width: 100%; 
 
    background: #000; 
 
    clear: both; 
 
} 
 
.bblock3body { 
 
    width: 100%; 
 
    background: #ccc; 
 
    padding: 10px 0 10px 0; 
 
    clear: both; 
 
} 
 
.bblock1 { 
 
    width: 100%; 
 
    background: #000; 
 
    clear: both; 
 
} 
 
.bblock2 { 
 
    width: 100%; 
 
    background: #217DD1; 
 
    clear: both; 
 
    min-height: 3px; 
 
} 
 
.bblock3 { 
 
    width: 100%; 
 
    background: #ccc; 
 
    padding: 10px 0 10px 0; 
 
    clear: both; 
 
} 
 
.container { 
 
    width: 1130px; 
 
    margin: 0 auto; 
 
    vertical-align: middle; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bblock1"> 
 
    <div class="container"> 
 
    <div class="bodymainMaxS"> 
 
     <div class='tabbed_content2'> 
 
     <div class='tabs2'> 
 
      <div class='moving_bg2'>&nbsp;</div> 
 
      <span class='tab_item2 tab_item_color2'>OVERVIEW</span> 
 
      <span class='tab_item2'>THE SCIENCE</span> 
 
      <span class='tab_item2'>ORDER</span> 
 
      <span class='tab_item2'>REPLACEMENT FILTERS</span> 
 
     </div> 
 
     </div> 
 
     <div class='slide_content2'> 
 
     <ul class='tabslider2'> 
 
      <li>11111111111111111111111111111111111111</li> 
 
      <li>2222222222222222222222222222222222222c</li> 
 
      <li>333333333333333333333333333333333333333333333</li> 
 
      <li>44444444444444444444444444444444444444</li> 
 
     </ul> 
 
     </div>

出典

2016-09-04 16:35:19

+0

https://jsfiddle.net/ph3ng2fo/35/ - そのスライダーをまだ解凍しています – alwayslearning

+0

プライマリで2番目のメニューをより基本的なものにすると思っていましたが、エラーを取得 – alwayslearning

+0

良いことは、プライマリスライダは今すぐ壊れている前に、彼らは両方がクレイジーに行く前に – alwayslearning

2

あなたは.eq()を使用することができます、.index(),.hide()

$(".tab_item2").click(function() { 
    $(".tab_item2").removeClass("tab_item_color2"); 
    $(this).addClass("tab_item_color2"); 
    // hide all `.tabslider2 li` elements, 
    // select, show `.tabslider2 li` element at current `.tab_item2` index 
    $(".tabslider2 li").hide().eq($(this).index(".tab_item2")).show(); 
});

https://jsfiddle.net/feto4ymt/14/

出典

2016-09-04 16:24:14 guest271314

+0

@david '.fadeOut（）'、 '.fadeIn（）'を使用したアプローチhttps://jsfiddle.net/feto4ymt/40/ – guest271314

+0

http://jsfiddle.net/ph3ng2fo/35 - こんにちは、それはネストされています。それはプライマリのeqのためで、それで2番目のメニューシステムをターゲットにしているのでしょうか？（上のリンクをクリックすると、テキストを表示する代わりに最後の2つが空白になります）。 – alwayslearning

+0

@ david _ "は、" _ブレーク "という意味ではっきりしていません。 _ "をクリックすると、上のリンクをクリックすると、最後の2つが何かのテキストを表示する代わりに空白になることがわかります" _テキストを隠さず、要素の 'color'または' class'だけを変更する必要がありますか？ – guest271314

0 
    <div class='tabs2'> 
        <div class='moving_bg2'>&nbsp;</div> 
        <span class='tab_item2 tab_item_color2' id="tab2_1">OVERVIEW</span> 
        <span class='tab_item2' id="tab2_2">THE SCIENCE</span> 
        <span class='tab_item2' id="tab2_3">ORDER</span> 
        <span class='tab_item2' id="tab2_4">REPLACEMENT FILTERS</span> 
       </div> 
      </div> 
      <div class='slide_content2'>       
       <ul class='tabslider2'> 
        <li class="tab2_1">11111111111111111111111111111111111111</li> 
        <li class="tab2_2">2222222222222222222222222222222222222c</li> 
        <li class="tab2_3">333333333333333333333333333333333333333333333</li> 
        <li class="tab2_4">44444444444444444444444444444444444444</li> 
       </ul> 
      </div> 

      <script> 
       $(".tab_item2").click(function() { 
        var custom_class = $(this).attr('id'); 
       $('.tabslider2 li').hide(); 
       $('.tabslider2 li.'+custom_class).show(); 

       $(".tab_item2").removeClass("tab_item_color2"); 
       $(this).addClass("tab_item_color2"); 
       //$(".tabitem2").show("slide_content2"); 
       }); 
      </script>

出典

2016-09-04 16:38:19 Arun

関連する問題

 関連する問題