2016-08-10 11 views
0

ほとんど同じで、読み込みが必要なページを12個作成したくないため、その時にクリックされたメニューに基づいてテキストを変更するメニューシステムを作成しようとしていますの読み込み。 私はオンラインで見たことがありますが、私は正しいキーワードを使用していない可能性が高いため、何も見つかりませんでしたが、これを達成するにはどうすればよいでしょうか?私はあなたがテキストを非表示にするCSSでの視認性タグを使用することができることを発見したが、これは空白行をたくさん残して、私は大量のテキストを表示していますので、それはひどい見えるメニューのクリックでテキストを変更する

HTML:

<html> 
    <head> 
    <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script> 
    <script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="js/menu.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="css/menu.css"> 

    </head> 
    <body> 

    <div id="accordian"> 
     <ul> 
      <li class="active"> 
       <h3><span class="icon-dashboard"></span>Menu 1</h3> 
       <ul> 
        <li><a href="#">Submenu 1</a></li> 
        <li><a href="#">Submenu 2</a></li> 
        <li><a href="#">Submenu 3</a></li> 
       </ul> 
      </li> 
      <li> 
       <h3><span class="icon-tasks"></span>Menu 2</h3> 
       <ul> 
        <li><a href="#">Submenu 4</a></li> 
        <li><a href="#">Submenu 5</a></li> 
        <li><a href="#">Submenu 6</a></li> 
       </ul> 
      </li> 
      <li> 
       <h3><span class="icon-calendar"></span>Menu 3</h3> 
       <ul> 
        <li><a href="#">Submenu 7</a></li> 
        <li><a href="#">Submenu 8</a></li> 
        <li><a href="#">Submenu 9</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    </body> 
</html> 

CSS:

@import url(http://fonts.googleapis.com/css?family=Nunito); 
* {margin: 0; padding: 0;} 

body { 
    background: #4EB889; 
    font-family: Nunito, arial, verdana; 
} 
#accordian { 
    background: #004050; 
    width: 250px; 
    margin: 100px auto 0 auto; 
    color: white; 
    box-shadow: 
     0 5px 15px 1px rgba(0, 0, 0, 0.6), 
     0 0 200px 1px rgba(255, 255, 255, 0.5); 
} 
#accordian h3 { 
    font-size: 12px; 
    line-height: 34px; 
    padding: 0 10px; 
    cursor: pointer; 
    background: #003040; 
    background: linear-gradient(#003040, #002535); 
} 
#accordian h3:hover { 
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); 
} 
#accordian h3 span { 
    font-size: 16px; 
    margin-right: 10px; 
} 
#accordian li { 
    list-style-type: none; 
} 
#accordian ul ul li a { 
    color: white; 
    text-decoration: none; 
    font-size: 11px; 
    line-height: 27px; 
    display: block; 
    padding: 0 15px; 
    transition: all 0.15s; 
} 
#accordian ul ul li a:hover { 
    background: #003545; 
    border-left: 5px solid lightgreen; 
} 
#accordian ul ul { 
    display: none; 
} 
#accordian li.active ul { 
    display: block; 
} 

jQueryの:

$(document).ready(function(){ 
    $("#accordian h3").click(function(){ 
    if(!$(this).next().is(":visible")) { 
     $(this).next().slideDown(); 
     } else { 
      $(this).next().slideUp(); 
     } 
    }) 
}) 
+0

サイドノート:CSSを使用してページ上に要素を表示しない場合は、 'visibility:hidden'の代わりに' display:none'を使用できます。可視性は、要素が占めるスペースを使用しますが、コンテンツは表示しませんが、表示はスペースも表示コンテンツも使用しません。 – TW80000

+0

これはあなたがJavascriptのJSONソリューションを必要としているように聞こえます... CSSではありません。 –

+0

質問が不明です – brk

答えて

0

あなたは、CSSを変更する必要はありません、非表示()や笙を使用するようにしてください助けてくれてありがとうみんなを

here is example

0

)(ワット私は、メニューリンク上でopentab関数を使用して、表示を切り替えることで動作させました。誰かがそれを提案しましたが、彼らは答えを削除したようです。

関連する問題