- 締切済み
文の折りたたみ
ブログなどでよくある「続き」を折りたたみで表示する方法を教えて下さい。 ググってみたのですが、ブログのテンプレしか見つけられず、それを普通のページにどう応用したらいいのかがサッパリ分かりません。 ヘッダに <script type="text/javascript"> <!-- function showMore(varA1, varB1){ var123 = ('varXYZ' + (varA1)); varABC = ('varP' + (varA1)); if( document.getElementById ) { if( document.getElementById(var123).style.display ) { if( varB1 != 0 ) { document.getElementById(var123).style.display = "block"; document.getElementById(varABC).style.display = "none"; } else { document.getElementById(var123).style.display = "none"; document.getElementById(varABC).style.display = "block"; } } else { location.href = varB1; return true; } } else { location.href = varB1; return true; } } //--> </script> …と記述するのは分かったのですが、本文中をどうすればいいのか… お願いします。
- roserea
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
こんな感じでどうでしょう 開くのみですが、もう一度畳む必要はあるのでしょうか ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <script type="text/javascript"> <!-- function showMore(node){ node.parentNode.childNodes.item(1).style.display="block"; } //--> </script> </head> <body> <div><span style="text-decoration:underline" onClick="showMore(this)">続き>></span><div style="display:none"> 本文<br /> … </div> </div> </body> </html>
関連するQ&A
- FC2ブログで追記を閉じるを押しても記事トップに
FC2ブログで利用しています。 長い記事を書くことがあるので「続きを読む・続きを閉じる」の機能を利用しています。 設定の仕方はこちらのブログの記事を参考にさせていただきました。 http://bisco.blog2.fc2.com/blog-entry-6.html -上記ブログの記事内容- １．HTMLの<head>と</head>の間に以下を挿入します。 <script type="text/javascript"> <!-- function showMore(varA1, varB1){ var123 = ('varXYZ' + (varA1)); varABC = ('varP' + (varA1)); if( document.getElementById ) { if( document.getElementById(var123).style.display ) { if( varB1 != 0 ) { document.getElementById(var123).style.display = "block"; document.getElementById(varABC).style.display = "none"; } else { document.getElementById(var123).style.display = "none"; document.getElementById(varABC).style.display = "block"; } } else { location.href = varB1; return true; } } else { location.href = varB1; return true; } } //--> </script> ２．HTMLの<!--more_link-->と<!--/more_link-->の間を以下に変更します。 <!--BisEntryIfExtended--> <span id="varP<%topentry_no>"> <a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;">【Read More】</a> </span> <div id="varXYZ<%topentry_no>" style="display: none"> <%topentry_more><br clear="all"> <a href="#<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【Hide More】</a> </div> <!--/BisEntryIfExtended--> ３．閉じたときに記事の頭へ戻れない場合 閉じるときにはid="<%topentry_no>"を目印にしているので、記事タイトル（<%topentry_title>）を囲む<h3>や<div class="entry_title">などにid="<%topentry_no>"を入れます。 このブログの記事に書いてある通りにHTMLも書き換えたのですが、続きを閉じるを押してもその記事のトップには戻っているのですが、記事のタイトルの部分がFC2ブログのヘッドバー（ブログの一番上にあるバー、広告だったり「ブログ内検索」があったり）と被ってしまい記事のタイトルが表示されてない状態で、見た目が記事のトップに戻れて無いような感じでなんだかしっくりきません。 続きを閉じるを押した時にヘッドバーに邪魔されずに記事タイトルが画面上に表示された状態にするやり方を是非教えていただきたいです。 自分のブログのURLはこちらです。 http://cirquefreak.blog.fc2.com/ 今ふと思ったのはこのFC2のヘッドバーをHTMLを編集して削除するのはどうなのかなと思ったのですが、どうなのでしょうか？削除したら違反とかになっちゃうのでしょうか？ あとは記事タイトルの部分をもっと大きくしてヘッドバーの大きさに邪魔されないようにするって考えもあるのですが、その部分だけがでかくなったらなんかバランス的に変かなとも思ってしまいます。 アドバイスのほどよろしくお願いします。
- ベストアンサー
- ブログ
- java折りたたみタグを複数設置したい
僕のホームページには今、javaの折りたたみを使っています。 一応今は、 <!--/以下javaによる開閉/--> <script language="javascript" type="text/javascript"><!-- var flag=0; function popShow(){ if(!flag){ document.getElementById("prof").style.display="block"; flag=1; } else { document.getElementById("prof").style.display="none"; flag=0; } } //--> </script> <a href="javascript:popShow();">開く</a> <div id="prof" style="display:none;"> <!-- ここから開く --> ここが内容になるようにしています。 <!-- /ここから開く --> </div><!--/以上javaによる開閉/--> このようなタグを使っているんですが、同じページにコピーして二つ設置してみたら片方のみ開いてもう片方は開かない、という状況に陥ってしまいました。 こうなってしまうと複数設置する意味がなくなってしまうのでどうにかできないものでしょうか？ ご返答宜しくお願いします。
- 締切済み
- レンタルサーバ・ASP
- グーグルのメタタグ
ＦＣ２のブログにメタタグいれたいんですけど エラーがでます。。 エラーの内容は 「 確認メタ タグがページ内の間違った場所にあります。ページの最初の <HEAD> セクションに挿入してください。」 です。 どこにメタタグをはりつけたらいいかイマイチわかりません。。 テンプレは、全部表示しませんが、こんなかんじです。 どこにメタタグ張ればいいでしょうか？ ↓ <?xml version="1.0" encoding="euc-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="author" content="<%author_name>" /> <meta name="description" content="<%introduction>" /> <meta name="keywords" content="<%blog_name>" /> <script language="JavaScript"><!-- function mySetCookie(myCookie,myValue,myDay){ myExp = new Date(); myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000)); myItem = "@" + myCookie + "=" + escape(myValue) + ";"; myExpires = "expires="+myExp.toGMTString(); document.cookie = myItem + myExpires; } function myGetCookie(myCookie){ myCookie = "@" + myCookie + "="; myValue = ""; myStr = document.cookie + ";" ; myOfst = myStr.indexOf(myCookie); if (myOfst != -1){ myStart = myOfst + myCookie.length; myEnd = myStr.indexOf(";" , myStart); myValue = unescape(myStr.substring(myStart,myEnd)); } return myValue; } // --></script> <script language="JavaScript"><!-- function showMore(varA1, varB1){ var123 = ('varXYZ' + (varA1)); varABC = ('varP' + (varA1)); if( document.getElementById ) { if( document.getElementById(var123).style.display ) { if( varB1 != 0 ) { document.getElementById(var123).style.display = "block"; document.getElementById(varABC).style.display = "none"; } else { document.getElementById(var123).style.display = "none"; document.getElementById(varABC).style.display = "block"; } } else { location.href = varB1; return true; } } else { location.href = varB1; return true; } } // --></script> <title><%sub_title> <%blog_name></title> <link rel="stylesheet" type="text/css" href="<%css_link>" media="screen,tv" title="default" /> <link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="rss" /> <link rel="alternate" type="application/rss+xml" title="ROR" href="sitemaps.xml" /> <link rel="top" href="<%url>" title="トップ" /> <link rel="start" href="<%url>" title="最初の記事" /> <!--preventry--><link rel="prev" href="<%preventry_url>" title="<%preventry_title>" /><!--/preventry--> <!--nextentry--><link rel="next" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry--> <META name="verify-v1" content="String_we_ask_for"> </head> <body> <div id="outline"> <!--▼▼ ヘッダー ▼▼-->
- ベストアンサー
- HTML
- フォームのリアルタイム入力チェック
現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、 エラーがあれば、送信されないようものを使っております。 送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、 入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。 エラーがあれば、下記のように隠しているメッセージなどが表示され、 問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。 で構いません。 よろしくお願い致します。 ・htmlファイル <div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div> <form name="mailform" method="post" action="index.php" onsubmit="return formCheck()"> <!--テキスト--> <div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div> <input type="text" name="text1" /><br /> <div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div> <input type="text" name="text2" /><br /> <div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div> <input type="text" name="text3" /><br /> ・JSファイル function formCheck(){ var flag = 0; if(document.mailform.text1.value==""){ flag = 1; document.getElementById('text1').style.display="block"; }else{ document.getElementById('text1').style.display="none"; } if(document.mailform.text2.value==""){ flag = 1; document.getElementById('text2').style.display="block"; }else{ document.getElementById('text2').style.display="none"; } if(document.mailform.text3.value==""){ flag = 1; document.getElementById('text3').style.display="block"; }else{ document.getElementById('text3').style.display="none"; } if(flag){ document.getElementById('notice-form').style.display="block"; return false; }else{ document.getElementById('notice-form').style.display="none"; return true; } }
- 締切済み
- JavaScript
- オンマウスで表示されるサブメニューについて
よろしくお願い致します。 メインメニューにオンマウスすると、サブメニューが表示される ようにしたく、下記のようなコードを使用しています。 FirefoxやsSafariで起きる問題なのですが、サブメニューを表示 した状態で他のページに移動後、ブラウザのバックを使用しても 戻ってきたとき、移動前に表示していたサブメニューが開いたまま になっており、その後ずっと開いたままで非表示にならないことが あります。 色々試してみたのですが、うまく行かず困っています。 どうか解決策をお教え下さいますようお願い致します。 <html> <head> <script type="text/javascript"> <!-- function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } window.onload = function() { document.getElementById(targetID).style.display = "none"; }; //--> </script> </head> <body> <a href="#" onMouseOver="showHide('subnavi');return false;">メインメニュー</a> <div id="subnavi" style="display:none;"> <a href="http://www.yahoo.co.jp/">サブメニュー</a> </div> </body> </html>
- ベストアンサー
- JavaScript
- ページが切り替わるスクリプトで最初から指定のページを表示させる
<html> <head> <script type="text/javascript" language="JavaScript"> <!-- JavaScript小技集 2005. 6.17 function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">記事を選ぶ</option> <option value="item1">記事１</option> <option value="item2">記事２</option> <option value="item3">記事３</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですが どうすればよいのでしょう？
- 締切済み
- Java
- 折りたたみタグ 他を閉じる（非表示にする）
折りたたみリンクが複数ある場合で、 一つ開くと他の開いた折りたたみリンクが閉じる（常に表示されるのは一つだけ）スクリプトを探しています。 以下のタグを使わせて頂いてます。 function show(inputData) { var objID=document.getElementById( "layer_" + inputData ); var buttonID=document.getElementById( "category_" + inputData ); if(objID.className=='close') { objID.style.display='block'; objID.className='open'; }else{ objID.style.display='none'; objID.className='close'; } } <a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');"> リンク </a> <div id="layer_@@@@" style="display:none" class="close"> 隠れた内容 </div> http://homepage3.nifty.com/kmyh/gaku/hyouzi2.html こちらで見つけたので、少しの修正でなんとかできないかと上記の使っている ものを少しずついじって試してみたのですが、動かなくなるだけでしたので、 丸々スクリプトを取り替えてみたのですが、何が悪かったのか動きませんでした…。 既にたくさん使用しているので、できれば丸々とりかえるのではなく、 簡単な修正で変更できたらいいなと思っております…。 ご助力よろしくお願い致します。
- ベストアンサー
- JavaScript
- 折りたたみメニュー
http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ja-sam_ri.htm ↑上記ページ８番目のように、別のメニューをクリックすると閉じる折りたたみメニューを探しています。 画像は使わずに下記ページのようなテキスト式の折りたたみメニューで、ソースも複雑でなく出来るだけ軽い物を探しています。http://www.openspc2.org/reibun/javascript/mouse/005/code.html 1日以上かけて上記条件の折りたたみメニューを探しましたが、どうしても見つかりませんでした。お教えいただけると幸いです。 ちなみに、今現在は以下の折りたたみメニューを使っています。 bodyの中にonclick="doClick()"を記入。 <SCRIPT LANGUAGE="JavaScript"> <!-- var myObj = null; function doClick(){ var strName; var intNo; myObj = window.event.srcElement; if((myObj.id=="")||(myObj==null))return true; intNo=1; strName=myObj.id + "_"+String(intNo); while(document.all.item(strName)!=null){ if(document.all.item(strName).style.display == "none"){ document.all.item(strName).style.display="block"; }else{ document.all.item(strName).style.display="none"; } intNo=intNo+1; strName=myObj.id + "_"+String(intNo); } return true; } //--> </SCRIPT> <SPAN id=menu1 STYLE="cursor:hand;" class="gramenua">メニュー１</SPAN> <SPAN id=menu1_1 STYLE="display:none;">メニュー２</SPAN> <SPAN id=menu1_1 STYLE="display:none;">メニュー３</SPAN>
- ベストアンサー
- JavaScript
- NN4で、ある日時になったら画像を消したい
先日、ある日時になったら画像を消す方法を教えて頂いたのですが、NN4でも動くように修正したいのですがどうすればいいかわかりません。 その時教えて頂いたソースは下記です。 function start(){ var limitTime="2006/04/10 11:50:30";//ある日時を設定して下さい。 var limitDate=new Date(limitTime); var nowDate=new Date(); defTime=limitDate-nowDate; if(defTime>0){ document.getElementById("img1").style.display="block"; document.getElementById("img2").style.display="block"; setTimeout("task()",defTime); }else{ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } } function task(){ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } どうすれば動くようになるのか教えて頂けないでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 折りたたみメニューについて
現在あるサイトを作成中で、メニューに折りたたみ式のものを使っています。いろいろなサイトや書籍を参考に、メニューそのものはきちんと動いているのですが、メニューをクリックするたびに展開したサブメニューがまた閉じてしまい、ページ移動するたびにメニューを展開させるのは使い勝手が悪いなと感じております。 たとえばＡというメニューを展開し、AAAというページへ移動した場合、展開されたＡは展開したままにしたいのですが… なにかヒントでもつかめないかと検索を続けてみましたが、どうしても分からず困っています。 ソースを記述しますので、こう修正すればできるんじゃない？とか、こっちのソースを使ったらできるよ、とかありましたら教えていただけませんでしょうか？ よろしくお願いします。 [Javascript] function oritatami(id,id2){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; if(document.all){ with(document.all(id2)){innerText=(innerText=="▽")?"△":"▽";} } else if(document.getElementById){ with(document.getElementById(id2)){firstChild.nodeValue=(firstChild.nodeValue=="▽")?"△":"▽";} } } [HTML] <a href="URL" onclick="oritatami('mw00','+0');return false"><span id="+0">▽</span> メニュー１</a><br> <div class="d2" id="mw00" style="display:none;"> ┣メニュー２(メニュー１から展開)<br> ┃┣ 001<br> ┃┣ 004 - 007<br></div> </div>
- ベストアンサー
- JavaScript
