- 締切済み
ページの表示切替について
いつもお世話になっています。 今ボタンを押すとページ移動なしに表示が切り替わるページを製作しています。 【ソース】***********************: <HTML> <HEAD> <script type="text/javascript"> //<![CDATA[ function petChange(tabNo) { var i, pets = 3; for (i = 1; i <= pets; i++) { document.getElementById("tabPet" + i).className = "tab_selector"; document.getElementById("pet" + i).className = "subPet"; } document.getElementById("tabPet" + tabNo).className = "tab_selector selected"; document.getElementById("pet" + tabNo).className = "mainPet"; } //]]> </script> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <style type="text/css"> /* タブ */ .tab_selector { border : 1px solid #cccccc; line-height : 1.5; margin : 10px 0px; padding : 2px 5px; cursor : pointer; background-color : #ffffff; } .selected { background-color : #cccccc; } .mainPet { padding : 0px 10px; display : block; } .subPet { display : none; } </style> </HEAD> <body> <!-- 切り替え部分 --> <div class="petChanger"> <span id="tabPet1" class="tab_selector selected" onclick="petChange(1);">AAAA</span> <span id="tabPet2" class="tab_selector" onclick="petChange(2);">BBBB</span> <span id="tabPet3" class="tab_selector" onclick="petChange(3);">CCCC</span></div> <div id="pet1" class="mainPet"> <TABLE> <TBODY> <?php include_once('aaaa.php') ?> </TBODY> </TABLE> </div> <!-- ペット表示 --> <div id="pet2" class="subPet"> <TABLE> <TBODY> <?php include_once('bbbb.php') ?> </TBODY> </TABLE> </div> <div id="pet3" class="subPet"> <TABLE> <TBODY> <?php include_once('cccc.php') ?> </TBODY> </TABLE> </div> </body> </HTML> ***************************** 「aaaa」を押すとaaa.phpを読み込み、「bbbb」を押すとbbbb.phpを読み込み・・・としたいのですが、実際動かすとページ表示時に「aaaa.php」が問題なく表示されるのですが、「bbbb」を押すと「aaaa.php」の下に追加される形で「bbbb.php」の内容が表示されます。 これを「bbbb」を押したとき「aaaa.php」を非表示にして「bbbb.php」の内容を表示する、というようにしたいのですがどのように変更すればよろしいでしょうか？ <?php include_once('aaaa.php') ?> という場所を文字列に置き換えた場合は正常に動作したため、恐らくphpを読み込む際に問題が発生しているようです。 何卒よろしくお願い致しますm(_ _;)m
- news_0203
- お礼率40% (327/800)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
ページの移動がないということは、ajaxで処理をするということですか？ そうであれば表示エリアを設定してそこを書き換える仕様にするとよいでしょう。 ページの再読み込みをしてもよいのであれば、A->BであればAを読み込む 部分に排他処理をいれればよいでしょう
関連するQ&A
- 表示中のタブに色を付けたい
タブ1111～5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>
- ベストアンサー
- JavaScript
- 画像表示の際空っぽの項目を非表示にするには、、
画像を含んだ検索システムについてご相談があります。 画像の部分で、データが空っぽの場合検索結果の更に詳細ページにて非表示にする条件分岐についてつまづいています。 レコードに画像データがある場合は検索結果にて表示し、データが空っぽの場合は非表示にするというものです。 以下に詳細ページ（検索結果一覧から詳細ページに進んだページ）の該当箇所のコードを記載します。 if文を使うのだろうというのはわかるのですが、どう書いていいかわからないでいます。 アドバイスいただけないでしょうか？ よろしくお願いします。 ～省略～ <?php $debug = false; //DB Connect $url = "***********"; $user = "**********"; $pass = "********"; $db = "********"; $link = mysql_connect($url,$user,$pass) or die("No Connected"); $sdb = mysql_select_db($db,$link) or die("No Selected"); if($debug) echo_r($_POST); mysql_set_charset('utf8'); if($_SERVER["REQUEST_METHOD"] != "POST") { echo "Error: invalid method"; exit(); } $id = $_POST['key']; $query = "SELECT * FROM shops where id='$id'"; $result = mysql_query($query) or die($query . '<br />' . mysql_error() . '<hr />'); $num_rows = mysql_num_rows($result); ?> <div class="row "> <div id="contents" class="clearfix"> <div class="span8"> <h2 class="f2"><b>■店舗詳細</b></h2> <?php while($row = mysql_fetch_assoc($result)): ?> <div class="row-fluid result-table" style="background-color:white;"> <div class="row-fluid"> <?php echo '<img src="get_image1.php?id=' . $row['id'] . '" style="width:100%;">'; ?> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a><?php echo '<img src="get_image2.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image3.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image4.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image5.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image6.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image7.php?id=' . $row['id'] . '" >' ?></a></p> </div> ～以下省略～
- ベストアンサー
- PHP
- headerをページによって表示、非表示にする
トップページのみヘッダーのjavasprictを使い、他ページでは非表示にしたいのですが、header.phpをもう一つ作り（javaのタグが入ってないもの）別名で保存し、header.phpと同じデレクトリーに保存しページの<?php get_header(); ?>の部分を<?php get_header1(); ?>に変えたのですがエラーでした。 これはどうすれば別々に見る事ができるでしょうか？？ 今のページ設定は以下になってます。 <?php get_header(); ?> <div class="span-24" id="contentwrap"> <div class="span-14"> <img src="http://pimpkidz.com/wp/wp-content/uploads/2011/08/side.jpg" /> <div id="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div id="indexthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'post_thumbnail' )); ?></a></div> <div id="indexcontent"> <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <p class="postdate"><span><?php the_time('Y/n/j(D)') ?> </span></p> <div class="entry"> <?php echo excerpt(40); ?> <div class="readmorecontent"> <a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Continue</a> </div> </div> </div> <div style="clear:both;"></div> </div><!--/post-<?php the_ID(); ?>--> <hr><?php endwhile; ?> <?php else : if ( is_category() ) { // If this is a category archive printf("<h2 class='pagetitle'>Sorry, but there aren't any posts in the %s category yet.</h2>", single_cat_title('',false)); } else if ( is_date() ) { // If this is a date archive echo("<h2 class='pagetitle'>Sorry, but there aren't any posts with this date.</h2>"); } else if ( is_author() ) { // If this is a category archive $userdata = get_userdatabylogin(get_query_var('author_name')); printf("<h2 class='pagetitle'>Sorry, but there aren't any posts by %s yet.</h2>", $userdata->display_name); } else { echo("<h2 class='pagetitle'>No posts found.</h2>"); } get_search_form(); endif; ?> </div> </div> <?php get_sidebars('right'); ?> </div> </div> <?php get_footer(); ?> もし他のソースが必要でしたら言ってください。宜しくお願い致します。
- ベストアンサー
- PHP
- table 幅指定でtheadとtbodyがずれる
bootstrapを使っているのですが、 個別に幅設定がしたいので、htmlに下記を追加しました。 theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで theadとずれてしまいます。 theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか？ <style type="text/css"> .scroll1 { width: 1600px; table-layout: fixed; } .scroll1 thead, .scroll1 tbody { float: left; } .scroll1 tbody { height: 350px; overflow-y: scroll; } .c1 { table-layout: fixed;width: 200px; } .c2 { table-layout: fixed;width: 100px; } .c3 { table-layout: fixed;width: 100px; } .c4 { table-layout: fixed;width: 200px; } .c5 { table-layout: fixed;width: 200px; } .c6 { table-layout: fixed;width: 200px; } .c7 { table-layout: fixed;width: 100px; } .c8 { table-layout: fixed;width: 250px; } .c9 { table-layout: fixed;width: 250px; } </style> <table class="table table-bordered table-striped"> <tr> <td> <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1"> <thead> <tr style=""> <th class="c1">アクション</th> <th class="c2">店舗コード</th> <th class="c3">ユーザID</th> <th class="c4">ユーザパスワード</th> <th class="c5">ユーザ名</th> <th class="c6">メールアドレス</th> <th class="c7">管理権限</th> <th class="c8">更新日</th> <th class="c9">登録日</th> </tr> </thead> <tbody> <tr style=""> <td style="width:200px;table-layout:fixed"> <input type="submit" value="削除" /> <input type="submit" value="編集" /> </td> <td style="width:100px;table-layout:fixed"> <span >2697</span> </td> <td style="width:100px;table-layout:fixed"> <span >002</span> </td> <td style="width:200px;table-layout:fixed"> <span >000000</span> </td> <td style="width:200px;table-layout:fixed"> <span >大築</span> </td> <td style="width:100px;table-layout:fixed"> <span ></span> </td> <td style="width:100px;table-layout:fixed"> <span >0</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:39</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:48</span> </td> </tr> </tbody> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- javascript ボタンを非表示にしたい
javascriptを学習しています。 3回目以降は追記できないようにしましたが、ボタンを非表示に出来ておりません。 どなたかご教授お願いいたします。 <!DOCTYPE html> <html> <head> <title>アカウント登録</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="base container"> <div class="row"> <h1>アカウント登録</h1> </div> <div class="row"> <div class="card" id="card"> <div class="card-block"> <form id="form-area" class="form-inline" method="post"> <div class="form-group"> <div class="input-group"> <input id="namae" name="namae" type="text" class="form-control" placeholder="名前"> </div> </div> <div class="form-group"> <div class="input-group"> <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"> </div> </div> <div class="form-group"> <input id="tuikaBtn" type="button" name="touroku" value="追加"> </div> <table id="result-table"> <thead> <tr> <th>名前</th> <th>ニックネーム</th> <th>削除</th> </tr> </thead> </table> </form> <div id="tuikaMoto"> </div> <div id="result"></div> </div> </div> </div> </div> </div> <div id="overLay"> </div> <script> class NameTable { constructor() { this.data = []; this.table = document.getElementById('result-table'); this.tbody = this.table.createTBody(); this.btn = document.getElementById("tuikaBtn"); this.input_namae = document.getElementById("namae"); this.input_nickname = document.getElementById("nickname"); } handleEvent(e) { if (e.target === this.btn) { const name_value = this.input_namae.value, nickname_value = this.input_nickname.value; if (this.checkTsuika(name_value, nickname_value)) { this.pushData(name_value, nickname_value); this.createTable(); }; } else if (e.target.matches('.del')) { this.clickDel(e.target); } } pushData(name, nickname) { /* DBなどに追加する場合は、ここでfetchなどで通信 */ this.data.push({ name: name, nickname: nickname }); window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`); this.input_namae.value = ''; this.input_nickname.value = ''; if (this.data.length > 2) { Object.assign(this.btn, { value: '', disabled: true, }); } } createTable() { while (this.tbody.firstChild) { this.tbody.removeChild(this.tbody.firstChild); } this.data.forEach(d => { const tr = this.tbody.insertRow(-1); tr.insertCell(0).appendChild(document.createTextNode(d.name)); tr.insertCell(1).appendChild(document.createTextNode(d.nickname)); const input_del = document.createElement('input'); Object.assign(input_del, { type: 'button', value: '削除', className: 'del', }); tr.insertCell(2).appendChild(input_del); }); } checkTsuika(name, nickname) { if (name === "" || nickname === "") { return false; } return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`); } clickDel(target) { /* fetchなどで削除を送信 */ const dels = [...this.tbody.querySelectorAll('.del')]; this.data = this.data.filter((_, i) => dels[i] !== target); this.createTable(); Object.assign(this.btn, { value: '追加ボタン', disabled: false, }); } } // 実行 window.addEventListener('DOMContentLoaded', () => { const table = new NameTable(); document.addEventListener('click', table, false); }); </script> </body> </html>
- 締切済み
- JavaScript
- 文字列連結がうまくいきません
define("SITE3_1", "http://www.yahoo.co.jp/"); (略) <div id="tab3-1" class="hoge"><dl><?php testfunc(SITE3_1,1,1); ?></dl></div> <div id="tab3-2" class="hoge"><dl><?php testfunc(SITE3_2,1,1); ?></dl></div> <div id="tab3-3" class="hoge"><dl><?php testfunc(SITE3_3,1,1); ?></dl></div> <div id="tab3-4" class="hoge"><dl><?php testfunc(SITE3_4,1,1); ?></dl></div> <div id="tab3-5" class="hoge"><dl><?php testfunc(SITE3_5,1,1); ?></dl></div> となってるのをループ処理したいのですが、 うまくいきません。 <?php for($i=1; $i< 6; $i++){ echo "<div id=\"tab3-\".i.\" class=\"tabPanel\"><dl>"; testfunc(("SITE3_".i."),1,1)"; echo "</dl></div>"; } ?> どう書けばよいでしょうか？
- ベストアンサー
- PHP
- このタグですが、左右一杯に広がったまま、左方向にページを伸縮しても
このタグですが、左右一杯に広がったまま、左方向にページをちじめても、左右にページ一杯のまま、伸縮するようになりませんか？ <BODY> <DIV style="top : 0px;left : 0px; position : absolute; z-index : 1; " id="Layer1"> <DIV> <TABLE> <TBODY> <TR> <TD bgcolor="#ffcccc" height="130" width="750"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 41px;left : 151px; position : absolute; z-index : 2; width : 397px; height : 43px; " id="Layer2" align="center"><FONT size="+3">テキスト</FONT></DIV> </BODY>
- ベストアンサー
- HTML
- CSSの複数使用について、（一つのページで）
CSSの複数使用について、（一つのページで） <head> <META http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./table2.css" type="text/css"> <link rel="stylesheet" href="./table.css" type="text/css"> </head> <body> <div style='width:35%'> <span class="roundcorner_box"> <span class="roundcorner_box1"><span></span></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box5"></span> </span> <div class="roundcorner_box_content"> ここに文字 </div> <span class="roundcorner_box"> <span class="roundcorner_box5"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box1"><span></span></span> </span> </div> このようなソースで、（外部ファイルは略）として、外部ファイルと「table」と「table2」にしたときに、 二つ指定する方法が分かりません。どうしたらいいですか？ 外部ファイルのtableとtable2の内容は別になっている。
- ベストアンサー
- HTML
- １ページ内にタブボックスをたくさん設置
下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定です このため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、 Toggleのところの記述が悪いのかうまく動きません。 初心者ですいませんが、ご教授ください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>
- ベストアンサー
- JavaScript
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
お礼
aaaa.phpとbbbb.php内の変数が重複していたため読み込みに失敗していました。 ご回答ありがとうございました。