Javaによるstyle属性の切り替え

このQ&Aのポイント
  • Java(Seasar2)とXHTMLを用いたWebアプリケーションを制御する方法について説明します。
  • Java側で設定した変数menuDispFlgによって、メニューバーの一部を表示・非表示にする方法について説明します。
  • メニューバーのidがmenuDispFlgとなっている箇所を、menuDispFlgが1の場合に非表示化する方法について説明します。
回答を見る
  • ベストアンサー

Javaによるstyle属性の切り替え

Java(Seasar2)とXHTMLを用いたWebアプリケーションを作成しています。 Java側で設定した変数menuDispFlg(String型)によって、メニューバーの一部を表示・非表示を制御するのですが、うまくいきません。 メニューバー <div class="gNavi" id="isMenu">  <ul>   <li id="menu00">~~</li>   <li id="menuDispFlg" style="">~~</li>   <li id="menuDispFlg" style="">~~</li>   <li id="menuDispFlg" style="">~~</li>   <li id="menuDispFlg" style="">~~</li>   <li id="menuDispFlg" style="">~~</li>   <li id="menu06">~~</li>  </ul> </div> Java 内部処理 /** * メニュー表示判定 * * @return boolean */ public boolean isMenuDispFlg() {  String menuDispFlgStyle = "display: block; height: 45px; position: relative; float: left; padding: 4px 4px 0px 4px; background: url(../images/menu/gNavi-05.gif) no-repeat right 9px;";  if (menuDispFlg.equals("1")) {   // フラグが1の場合、XXXメニューを表示しない   return menuDispFlgStyle == "display: none";  }  // フラグが0の場合、XXXメニューを表示する  return menuDispFlgStyle == "display: block; height: 45px; position: relative; float: left; padding: 4px 4px 0px 4px; background: url(../images/menu/gNavi-05.gif) no-repeat right 9px;"; } 以上のようになっており、メニューバーのid="menuDispFlg"となっている項目だけを、変数menuDispFlg="1"の時に非表示にします。 どこかおかしいところがあればご指摘ください。

  • HTML
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • teketon
  • ベストアンサー率65% (141/215)
回答No.1

<div class="gNavi" id="isMenu">  <ul>   <li id="menu00">~~</li>   <li id="menuDispFlg" style="display: #{isMenuDispFlg ? 'none' : 'block; height: 45px; position: relative; float: left; padding: 4px 4px 0px 4px; background: url(../images/menu/gNavi-05.gif) no-repeat right 9px;'};">~~</li>   (略)   <li id="menu06">~~</li>  </ul> </div> public boolean isMenuDispFlg() {  if (menuDispFlg.equals("1")) {   // フラグが1の場合、XXXメニューを表示しない   return true;  }  // フラグが0の場合、XXXメニューを表示する  return false; } XHTMLを理解していないとひと目で分かるコードになってますよ。 例えば、同じXHTML文書内でidは唯一であり、また基本的に(特別な制御をする場合を除き)idを 指定する必要はありません。 式言語(EL式、Expression Language)は使えますか? MVCの区別はつきますか?Java内ではXHTMLのコードは書きません。ましてやCSSもです。

関連するQ&A

  • Javaの変数でhtmlのメニュー表示を切替したい

    Javaと連携させたページについてです。 Javaで宣言した変数のtrue,falseによって、html上のメニューバーの表示・非表示を切り替えることができるようにしたいです。 メニューバーは下のようになっています <div class="gNavi" id="isMenu">  <ul>   <li id="menu0">~~</li>   <li id="menu1">~~</li>   <li id="menu2">~~</li>   <li id="menu3">~~</li>   <li id="menu4">~~</li>   <li id="menu5">~~</li>   <li id="menu6">~~</li>  </ul> </div> このメニューの2番目(menu1)~6番目(menu5)の表示・非表示を切り替えます。 いい方法はないでしょうか?

    • ベストアンサー
    • HTML
  • CSSで外部ファイルのスタイルが読み込めません

    不思議なことに<style>で囲った場合は、うまくいき、外部ファイル(link href)でcssを読み込んだときは、一部のレイアウト指定が乱れてしまいます。 HTML部分は <ul id="menu_bar"> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> </ul> CSS 部分は #menu_bar { width: 100%; height: 45px; padding: 0; margin: 0; margin-bottom: 2px; list-style-type: none; background: #ff7400; position: fixed; bottom: 0px; left: 0px; box-shadow: 0px -3px 15px rgba(0,0,0,0.4); // ボックス上に影をつける } #menu_bar li { width: 20%; float: left; padding: 0; margin: 0; text-align: center; border-spacing: 2px 2px; border-collapse: separate; } #menu_bar li a { width: auto; color: #fff; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 0; text-decoration: none; display: block; } #menu_bar li a:hover { background: #ffa443; } です。 外部ファイルと直接<style>で記述するときに違いが出るのは初めてです。考えられる原因が何かありますか?どのようにレイアウトが異なるかを画像添付しました。よろしくお願いします。

    • ベストアンサー
    • CSS
  • 幅違うメニュー(リスト)、floatで横並びで背景画像でテキスト飛ばしたいが・・

    お世話になります。 メニュー(リスト)のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。  マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー1</a></li> <li id="02"><a href="#">メニュ-2</a></li> <li id="03"><a href="#">メニュ-3</a></li> <li id="04"><a href="#">メニュ-4</a></li> <li id="05"><a href="#">メニュ-5</a></li> <li id="06"><a href="#">メニュ-6</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} (何か、他に必要な情報があれば、言ってください!)

    • ベストアンサー
    • CSS
  • CSSでのマウスオーバーの画像切り替えについて

    現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか? 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。

  • スタイルシートでのレイアウトの際に、border枠から文字がはみ出てしまう問題について

    まず、ソースです。 [html] <ul id="greeting"> <li id="entrancephoto">  写真 </li><!-- entrancephoto --> <li id="word">  言葉 </li><!-- word --> <li id="news">  ニュース </li><!-- news --> </ul><!-- greeting --> [css] ul#greeting{ clear:both; display:block; width:570px; border-color:#D6757E; border-width:1px; border-style:solid; padding:20px 0px 20px 0px; list-style:none; } li#entrancephoto{ float:left; width:210px; vertical-align:middle; padding:0px 20px 0px 20px; } li#word{ float:left; width:320px; } li#news{ clear:both; float:left; width:530px; padding:5px 0px 0px 20px; margin:auto; } --ここまで-- このように、一番外をid:greetingで囲み、 borderを設定しています。 そしてその中に、3つの要素を<li>で書いています。 (上に段組2段、下に1段) ですので、borderで全ての要素を囲みたいのですが、 id:greetingで囲んでいるはずが下の3つの要素を 囲むことは無く、高さ40pxの枠(padding分)に なってしまい、文字量に関係無い設定になってしまいます。 (IEでは、文字量に合わせてheightが変わるのですが、 firefox、nsではできません) いろいろ試してみたつもりですが解決できませんでした。 お分かりになる方、何卒よろしくお願いします。

    • ベストアンサー
    • HTML
  • ナビゲーションバーの背景画像が表示されません(CSS)

    私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例(ナビゲーションバーです)をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top;  float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="**">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。

    • ベストアンサー
    • CSS
  • IE7でのz-index対応について

    以下のようにコーディングすると、IE7でドロップダウンリストが後ろ側に隠れるのですが、対応方法はありますか?div#gnavi ul li ul.sublist のz-indexを9999とかにしても効果なくて。。。 <div id="gnavi"> <ul> <li><a href="#">MENU01</a></li> <li><a href="#">MENU02</a> <ul class="sublist"> <li><a href="#">MENU02-01</a></li> <li><a href="#">MENU02-02</a></li> <li><a href="#">MENU02-03</a></li> <li><a href="#">MENU02-04</a></li> <li><a href="#">MENU02-05</a></li> </ul><!-- /.sublist --> </li> <li><a href="#">MENU03</a></li> <li><a href="#">MENU04</a></li> </ul> </div><!-- /#gnavi --> <div id="adArea"> <ul> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> </ul> </div> CSS側では、以下のようにしています。 div#gnavi ul li { float:left; position:relative; } div#gnavi ul li ul.sublist { position:absolute; top:0px; left:0px; display:none; } div#gnavi ul li ul.sublist li { float:none; } div#adArea { clear:both; } div#adArea ul li { float:left; }

    • ベストアンサー
    • HTML
  • メニューの横スクロールバーを消したい

    色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。 ※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。 ドロップダウンメニューをセンタリング表示しているのですが、 どうあっても横スクロールバーが出てしまいます。 下記サイトではoverflow:hiddenを使用すると書いていますが 使用するとドロップダウンが非表示になってしまうため難しいです。 http://www.coolwebwindow.com/csstips/csstechnic/000241.php 【html】 <div id="global-nav"> <ul class="menu" id="menu"> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li><a href="dl-1.html">ドロップダウン</a></li> <li><a href="dl-2.html">ドロップダウン</a></li> <li><a href="dl-3.html">ドロップダウン</a></li> </ul> </li> </ul> </div> 【css】 div#global-nav { position:relative; width: 1000px; height: 40px; margin: 0 auto; background: #999; } ul.menu {   position: relative;   list-style:none;   left:50%;   float:left;   margin:0; padding:0;   text-align: left; } ul.menu * {   margin:0;   padding:0; } ul.menu a {   display:block; color:#000; text-decoration:none; } ul.menu li.a {   position: relative; left:-50%; float:left; } ul.menu ul {   position:absolute; top:40px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none; } ul.menu ul li {   position:relative;   border-top:none;   width:180px;   margin:0; } ul.menu ul li a { display:block; padding:3px 7px 5px; background-color:#d1d1d1; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul ul { left:180px; top:-1px; } ul.menu .menulink { width:180px; } ul.menu .menulink:hover, ul.menu .menuhover { background:url(images/header_over.gif); } ul.menuの中のleft:50%を消すと横スクロールバーが消える事はわかったのですが、 それだと中央揃えにならないので…。 どうか宜しくお願いします!

    • ベストアンサー
    • HTML
  • CSSのみで作る横ドロップダウンメニュー

    教えてください。白旗です。 クライアントの指示でCSS+xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE6のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul>  </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }

  • ドロップダウンメニュー

    ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>

    • 締切済み
    • CSS

専門家に質問してみよう