• 締切済み

JavaScriptのメモ帳アプリ編集について

Monacaでメモ帳を作りました このコードだと追加ボタンを押してテキストエリアが現れテキストを書き込み保存してTopPageにリスト化できるようになっています。またそのリストを押すとメモが閲覧できます ですが理想としては閲覧ページのヘッダー部分に「編集」というボタンをつけて押すとメモが編集できるようにしたいです どうすればできるのでしょうか？ いろいろ調べたのですが応用できなくて......。 index.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script src="js/memo.js"></script> <script src="js/app.js"></script> <script> monaca.viewport({width: 320}); </script> </head> <body> <!-- TOP Page --> <div data-role="page" id="TopPage"> <header data-role="header" data-position="fixed"> <h1>TextMemo</h1> <a href="#AddPage" data-icon="plus" class="ui-btn-right">追加</a> </header> <section data-role="content"> <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete"> </ul> </section> </div> <!-- Add Memo Page --> <div data-role="page" id="AddPage"> <header data-role="header" data-position="fixed"> <a data-role="button" data-rel="back" data-icon="back">Back</a> <h1>Add Memo</h1> </header> <section data-role="content"> <label for="Memo">Memo:</label> <textarea id="Memo"></textarea> <a data-role="button" data-icon="check" id="SaveBtn">Save</a> </section> </div> <!-- Detail Page --> <div data-role="page" id="ShowPage"> <header data-role="header" data-position="fixed"> <a data-role="button" data-rel="back" data-icon="back">Back</a> <h1></h1> </header> <section data-role="content"> <p></p> </section> </div> </body> </html> app.js function onSaveBtn() { var text = $("#Memo").val(); if (text != '') { // Save to local storage addMemo(text); // Clear form $("#Memo").val(""); // Initialize top page initTopPage(); } $.mobile.changePage("#TopPage", { reverse: true }); } function initTopPage() { $("#TopListView").empty(); var list = getMemoList(); for (var i in list) { var memo = list[i]; var d = new Date(memo.time); var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate(); $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>"); $li.data("id", memo.id); $li.find("h3").text(date); $li.find("p").text(memo.text); $("#TopListView").prepend($li); } if (list.length == 0) { $li = $("<li>NO MEMO</li>"); $("#TopListView").prepend($li); } $("#TopListView").listview("refresh"); // Call refresh after manipulating list } function onShowLink() { var $li = $(this).parent(); var memoTitle = $li.find("h3").text(); var memoHtml = $li.find("p").html().replace(/\n/g, "<br>"); $("#ShowPage h1").text(memoTitle); $("#ShowPage p").html(memoHtml); $.mobile.changePage("#ShowPage"); } function onDeleteLink() { if (!confirm("本当に削除しますか?")) { return; } var $li = $(this).parent(); var id = $li.data("id"); deleteMemo(id); initTopPage(); $.mobile.changePage("#TopPage", { reverse: true }); } function onReady() { initTopPage(); $("#SaveBtn").click(onSaveBtn); $("#TopListView a.show").live("click", onShowLink); $("#TopListView a.delete").live("click", onDeleteLink); monaca.splashScreen.hide(); } $(onReady); // on DOMContentLoaded memo.js ///// Return list of memo function getMemoList() { var list = localStorage.getItem("memo_list"); if (list == null) { return new Array(); } else { return JSON.parse(list); } } ///// Save memo function saveMemoList(list) { try { localStorage.setItem("memo_list", JSON.stringify(list)); } catch (e) { alert('Error saving to storage.'); throw e; } } ///// Add memo function addMemo(text) { var list = getMemoList(); var time = new Date().getTime(); list.push({ id: time, time: time, text: text }); saveMemoList(list); } ///// Delete specified memo function deleteMemo(id) { var list = getMemoList(); for (var i in list) { if (list[i].id == id) { list.splice(i, 1); break; // Quit for loop when found } } saveMemoList(list); }

みんなの回答

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.3

No.2 の回答に追記です > 閲覧から編集を押すとWindowsのメモ帳みたいに書き込んだ内容も表示され... 関数 onShowLink は、閲覧ページに内容を表示する処理ですが、 編集ページにも表示させる様に処理を追加しましょう これで閲覧から編集にページが移っても内容はそのまま表示されます $("#UpdateId").val(id); $("#UpdateText").val(text); id/text の中身ですが、推測するにこのような感じでしょうか var id = $li.data("id"); var text = $li.find("p").text();

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

改造点を簡単に 閲覧ページにリンク追加 <a href="#UpdatePage">編集</a> 編集ページを新設 <div data-role="page" id="UpdatePage"> <input type=hidden id="UpdateId"> <textarea id="UpdateText"></textarea> <a id="UpdateBtn">Update</a> </div> 関数 onShowLink に処理追加 $("#UpdateId").val(id); $("#UpdateText").val(text); 関数 onUpdateBtn を新設 function onUpdateBtn() { var id = $("#UpdateId").val(); var text = $("#UpdateText").val(); deleteMemo(id); addMemo(text); // TODO updateMemo(id,text) に置き換える initTopPage(); $.mobile.changePage("#TopPage", { reverse: true }); } 関数 onReady に処理追加 $("#UpdateBtn").click(onUpdateBtn);

DreamyLife_615
質問者

お礼

indexとappに入れたら動きました！！ ですが理想としては新しいテキストエリアではなく書いた内容も表示してそこから編集できるようにしたいです 例えるなら 閲覧から編集を押すとWindowsのメモ帳みたいに書き込んだ内容も表示され誤字脱字を訂正できるような感じです

DreamyLife_615
質問者

補足

詳しくありがとうございます！！ 組み入れたのですが動きませんでした、、、。 どこに組み入れればよいのでしょうか？

回答No.1

おはようございます。 まったく参考にならないでしょうけれど、こんぱくとにじぶんなりにかいてみました。 さくじょする機能がないことに、いまきづきました。が投稿します <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> body > section { 　display : none; } #ViewPage > div { 　border: 2px green dotted; 　margin-top : 1em; 　padding : 1ex; } #LIST li { 　text-overflow: ellipsis; } </style> <body> <section id="TopPage"> 　<header> 　　<h1>TextMemo</h1> 　</header> 　<ol id="List"> 　</ol> </section> <section id="EditPage"> 　<header> 　　<h1>Edit Memo</h1> 　　<a href="#TopPage">Top</a> 　　<a href="#Save">Save</a> 　　<a href="#ViewPage">View</a> 　</header> 　<p> 　　Memo: 　<p> 　　<textarea cols="60" rows="10" id="Text"></textarea> </section> <section id="ViewPage"> 　<header> 　　<h1>View Memo</h1> 　　<a href="#TopPage">Top</a> 　　<a href="#Save">Save</a> 　　<a href="#EditPage">Edit</a> 　</header> 　<div id="Content"></div> </section> <script> function disp (s) { s.style.display = this == s ? 'block': 'none' } function remove (e) { while (e.hasChildNodes ()) e.removeChild (e.firstChild) } function createLI (t, h) { 　var d = document; 　var a = d.createElement ('a'); 　var li = d.createElement ('li'); 　 　a.href = h; 　return li.appendChild (a).appendChild (d.createTextNode (t)), li; } function hashCheck (h) { 　var p, n; 　 　if (p = /^(#ViewPage)-(\d+)$/.exec (h)) 　　h = p[1], NO = Number (p[2]); 　 　switch (h) { 　case '' : 　case '#TopPage' : 　　remove (LIST); 　　for (var i = 0, I = DATA.length; i < I; i++) 　　　LIST.appendChild (createLI (DATA[i].substring (0, 20), '#ViewPage-' + i)); 　　LIST.appendChild (createLI ('[New]', '#NewPage')); 　　SECTION.forEach (disp, TOP); 　　break; 　 　case '#NewPage' : 　　NO = DATA.length; 　case '#EditPage' : 　　TEXT.value = DATA[NO] || ''; 　　SECTION.forEach (disp, EDIT); 　　break; 　case '#ViewPage' : 　　CONTENT.innerHTML = DATA[NO]; 　　SECTION.forEach (disp, VIEW); 　　break; 　case '#Save' : 　　DATA[NO] = TEXT.value; 　　localStorage.setItem ('TextData',JSON.stringify (DATA)); 　　alert ('Save OK!'); 　　break; 　　 　default : 　　return false; 　} 　 　return true; } function listener (event) { 　var e = event.target; 　if ('href' in e) 　　if (hashCheck (e.getAttribute ('href'))) 　　　event.preventDefault(); } var DATA = JSON.parse (localStorage.getItem ('TextData')) || []; var LIST = document.querySelector ('#List'); var TEXT = document.querySelector ('#Text'); var CONTENT = document.querySelector ('#Content'); var TOP = document.querySelector ('#TopPage'); var EDIT = document.querySelector ('#EditPage'); var VIEW = document.querySelector ('#ViewPage'); var SECTION = [ TOP, EDIT, VIEW ]; var NO; hashCheck (location.hash); document.addEventListener ('click', listener, false); </script> </body> </html>

DreamyLife_615
質問者

補足

ご回答ありがとうございます！ 現在Monacaでこのアプリを作っていましてやはりスマホで手軽に閲覧、編集ができるということは必須だと思います 私のコードの場合だとどこにどういった命令を入れると編集できますか？ 使っていただくとお分かりになると思いますが編集するときはメモを追加するときにテキストを書く画面にしたいです

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • H2にも色を付けたい、デザインを適用させたい

    http://blog.direct-search.jp/2010/10/jquery-mobile.html のサイトを参考にしたのですが、 <h2>test</h2> も　<h1>Header</h1> のように、 色を白にして背景を青にするデザインにするにはどうすればいいでしょうか？ 今は下記のコードのしていますが、 そうすると画像の様に、<h2>test</h2> は太字でtestになってしまいます。 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <section data-role="page" data-theme="b" id="ds-home"> <header data-role="header" data-theme="b"> <h1>Header</h1> </header><!-- /header --> <article data-role="content"> <div>This is a test page.</div> <h2>test</h2> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category</li> <li><a href="#ds-page-1">First Child</a></li> <li><a href="#ds-page-2">Second Child</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category 2</li> <li><a href="#ds-page-3">First Child 2</a></li> <li><a href="#ds-page-4">Second Child 2</a></li> </ul> </article><!-- /content --> <header data-role="footer" data-theme="b"> <h2>Footer</h2> </header><!-- /footer --> </section><!-- /page --> </body> </html>

    • ベストアンサー
    • HTML
  • javascriptで困っています。教えてください

    jQueryMobileを使って地図を表示したいと思っています。 ４か所にマーカーを表示させ、そのマーカーをクリックするとそれぞれのurlに飛ぶようにしたいのですが、うまくいきません。for文の中のgoogle.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});のところがおかしいのでしょうか？myMarkerを名前を変えながらgoogle.maps.event.addListenerをしていかないとだめなのでしょうか？教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Google マップの表示</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <style type="text/css"> <!-- #map_canvas { width:100%; height:400px; } --> </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> $(function() { var data = new Array();//マーカー位置の緯度経度 data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅', url:'http://www.jreast.co.jp/estation/stations/1039.html'}); data.push({position: new google.maps.LatLng(34.809445,135.532408), content: '太陽の塔', url:'http://park.expo70.or.jp/'}); data.push({position: new google.maps.LatLng(43.062584,141.353627), content: '時計台', url:'http://www15.ocn.ne.jp/~tokeidai/'}); data.push({position: new google.maps.LatLng(26.694183,127.877963), content: '美ら海水族館', url:'http://oki-churaumi.jp/'}); var latlng = new google.maps.LatLng(36.449567,137.636719); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 　　　for (i = 0; i < data.length; i++) { 　　　var myMarker = new google.maps.Marker({ position: data[i].position, map: map, icon: "km.png" }); google.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;}); } $('#map_content').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); }); </script> </head> <body> <div data-role="page" id="map"> <div data-role="header"> <h1>Google マップの表示</h1> </div> <div data-role="content" id="map_content"> <div id="map_canvas"></div> </div> <div data-role="footer"> <h4>&copy; map</h4> </div> </div> </body> </html>

  • JavaScriptのGPSについて

    現在地の名前を入力し、GoogleMapで表示してその地図を保存するというものを作ったのですが 以下のコードで現在地を取得するとなぜかiPhoneでもAndroidでもバルセロナが表示されます なぜなのでしょうか？ 開発環境はMonacaです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <h1>ブックマークMAP</h1> <div id="new_div"> 店名：<input id="name_txt" type="text" value="" size="20" /><br /> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\n"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } </script> </body> </html>

  • javascriptとCSSを使ってのドロップダウンメニュー作成

    CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();

  • javascriptに関する質問です。

    このコードを簡単に説明してください。 なぜあまりが0になると、JSが動作するのかがわかりません。 （child childrenのあたりも自分の頭がごちゃごちゃしています） よろしくお願いします。 <html> <head> <title>Hello DOM !</title> </head> <body> <div id="wrap"> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <script type="text/javascript"> var children = document.querySelector("#wrap .list").children; for(var i=0;i<children.length;i++){ var child = children[i]; if(i%2){ child.style.backgroundColor = "#EEEEEE"; } } </script> </body> </html>

  • JSの保存ダイアログについて

    以下のコードは簡易メモ的なものです そこに書き込まれた内容を保存できるようにしたいのですがfunction dl()には何を書けばいいのでしょうか？ 調べてみて function dl(C:\){ var a = document.createElement('a'); a.href = C:\; a.setAttribute('dl', name || 'noname'); a.dispatchEvent(new CustomEvent('click')); } としてみたのですがこれを書き込むと保存ダイアログはおろかtextの保存もできなくなってしまいます <input type="text" id="title"><br><br> <textarea id="memo" rows="8" cols="50"></textarea><br><br> <input type = "button" value="SAVE" onclick="dl();"> <script> var title = document.getElementById("title"); var memo = document.getElementById("memo"); window.onload = function() { var body_title = localStorage.getItem("title"); if (body_title != null) title.value = body_title; var body_memo = localStorage.getItem("memo"); if (body_memo != null) memo.value = body_memo; } title.onchange = function() { localStorage.setItem("title",title.value); } memo.onchange = function() { localStorage.setItem("memo",memo.value); } function dl(){ } </script>

  • jqueryの$.getJSONの処理結果について

    jqueryの$.getJSONの結果およびその違いについて教えてください。 以下の(1)と(2)の処理があり、(2)を(1)と同じ様に 出力したいと考えておりますが、(2)では(1)のように 「class="ui-li-static ui-body-inherit ui-first-child"」などが 設定されずに出力されてしまいます。 そのため、どのように記述すれば(1)と同じ結果になるのかを ご教授いただけますでしょうか。 また、宜しければ(1)と(2)の処理の違いを 教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 　apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>

  • jQueryについて

    jQueryのクロスフェードとlightboxを同一ページに設定しています。 よく分かっていないのに、コピペで作っていますが、 クロスフェードをするとlightboxが動作しません。 設定をどう変更したら出来るようになりますか？ どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"><!--outer　START--> <div id="container"> <div id="header"><!--header　START--> <h1>いろはにほへと</h1> </div><!--header　END--> <div id="menu"><!--menu　START--> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div><!--menu　END--> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"><!--contents　START--> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>

  • IEだけで動きません。Javascriptに関する質問です。

    IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> 　　<head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> 　　</head> <body> 　　<div id="container"> 　　</div> 　　　　　　<div id="menu"> 　　　<ul> 　　　<li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> 　　　<li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> 　　　<li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> 　　　</ul> 　　</div> 　　　　</body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> 　<head> <script type="text/javascript" src="bbb.js"></script> 　</head> 　　<body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> 　　</body> </html>

  • Javascriptでプルダウンメニューを作りましたが関数化できません

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する