はじめて投稿します。よろしくお願いします。
フレームページで、左にメニュー、右にコンテンツです。
右コンテンツ内はtoggleで項目ごとに展開・折りたたみの設定をしており
初期値はdisplay:none;を指定しています。
左メニューのリンクをクリックすると、右コンテンツの該当箇所に移動して
中身を展開して表示させたいです。
<左メニュー(menu.html)>
<ul>
<li><a href="a.html#title1" target="right"></li>
<li><a href="b.html#title2" target="right"></li>
・
・
・
</ul>
<右コンテンツ(a.html)>
<script>
$(function(){
$("#list li div:nth-child(1)").addClass("title");
$("#list li div:nth-child(2)").addClass("content");
$(".title").click(function(){
$(this).next().toggle(300);
});
});
</script>
<ul id="list">
<li>
<div id="title">
<p>
<h4>
<a name="title1">
タイトル1</a>
</h4>
</p>
</div>
<div id ="content" style="display:none;">
<p>
あああああああああああああああああああああああ
</p>
</div>
</li>
</ul>
javascriptなのかjqueryなのか、CSS3でもできるのか・・
なるべく簡単な方法がいいのですが
知識が乏しく、色々と試しましたが結果が出ずに悩んでいます。
アドバイスいただけないでしょうか。
No.9ベストアンサー
- 回答日時:
No.6 の補足
> 展開されないことがあります。
こういうことでしょうか?
左の #title1 リンクを押す → 展開
右の #title1 見出しを押す → 閉じる
左の #title1 リンクを押す → 展開されない
ならば
function open(hash) {
$(hash).parent('li').find('.content').show(300);
location.hash = '#opened'; //【追加】
}
No.8
- 回答日時:
そうそう
:tergetをIE8以前で
> ⇒レッド ■ ワン: red-one: CSS3: Target 擬似クラスを実装するスクリプト sfTarget.js を(勝手に)作り直し( http://redone-on.blogspot.jp/2008/06/css3-target … )
No.7
- 回答日時:
そうそう、HTML本体を
_<div class="section">
__<h2>見出し</h2>
__<div class="section" id="SECTION1">
___<h3><a href="#SECTION1">1項見出し</a></h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SECTION2">
___<h3><a href="#SCTION2">2項見出し</a></h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SECTION3">
___<h3><a href="#SECTION3">3項見出し</a></h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SECTION4">
___<h3><a href="#SECTION4">4項見出し</a></h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="nav">
___<ol>
____<li><a href="#SECTION1">1項</a></li>
____<li><a href="#SECTION2">2項</a></li>
____<li><a href="#SECTION3">3項</a></li>
____<li><a href="#SECTION4">4項</a></li>
___</ol>
__</div>
_</div>
のほうが使いやすいですね。タイトルクリックで広がります。
No.6
- 回答日時:
No.5 ですが、少々誤解があるようなので、ちゃんと書いてみました。
ie8 とのことですので <script> が少々泥臭いです。すみません。
-- menu.html
そのまま
-- a.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11 …
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"> …
<script src="https://raw.githubusercontent.com/cowboy/jquery- …
<script>$(function(){
function open(hash) { $(hash).parent('li').find('.content').show(300) }
if (location && location.hash) open(location.hash);
$(window).hashchange(function(){if (location && location.hash) open(location.hash);});
$('#list li h4').click(function(){$(this).parents('ul#list li').find('.content').toggle(300);});
})</script>
<style>
#list li .content { display:none; }
</style>
<ul id="list">
<li>
<h4 id="title1">タイトル1</h4>
<div class="content"><p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ<p>あ</div>
<li>
<h4 id="title2">タイトル2</h4>
<div class="content"><p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い<p>い</div>
<li>
<h4 id="title3">タイトル3</h4>
<div class="content"><p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う<p>う</div>
</ul>
この回答への補足
色々試し、下に書いた現象は回避されるようになりました!
早とちりで書き込みすみません。
スムーズに動くようになったところで、ページを何度か切り替えてテストしていたのですが、3~4回に1度くらいの頻度で
展開されないことがあります。
他のメニューをクリックして、再度もどると今度は展開されていたりします。
度々で恐縮なのですが、この現象について
回避方法など、アドバイスいただけないでしょうか。
サンプルソースありがとうございます!
とてもわかりやすくてありがたいです。。
早速試してみたのですが、最初にクリックしたリンクは
開くのですが、2回目からが開かないのです。。
1回目・タイトル1クリック→開く
2回目・タイトル2クリック→開かない
ページをリロードして
1回目・タイトル2クリック→開く
2回目・タイトル1クリック→開かない
・・といった具合なのです。
そのまま持ってきて試したのですが
私がどこか不足しているところがあるのか、見直している最中です。
あと少しなのにもどかしいです・・
Ogre7077様の環境では動作されているのですよね・・
No.5
- 回答日時:
あれじゃ印刷したら惨めなことになるので・・
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{width:100%;height:100%;}
h1,h2,h3,h4,h5,h6,p{margin:0;}
p{text-indent:1em;}
-->
_</style>
_<style type="text/css" media="print">
<!--
h1,h2,h3,h4,h5,h6,p{line-height:1.8em;}
div.section div.nav{display:none;}
-->
_</style>
_<style type="text/css" media="screen">
<!--
body{position:relative;}
h1,h2,h3,h4,h5,h6,p{line-height:1.6em;}
h3{height:30px;}
h2,h3{z-index:10;position:relative;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.header{position:fixed;top:0;left:0;height:100px;border-bottom:ridge 3px gray;background-color:white;z-index:20;}
div.section{position:relative;top:110px;}
div.section div.nav{position:fixed;left:0;top:110px;width:200px;height:100%;border-right:ridge 3px gray;}
div.section h2,div.section p{margin-left:210px;}
div.section div.section{width:auto;min-width:0;margin:0 0 0 210px;padding:0;position:static;overflow:hidden;height:30px;}
div.section div.section p{margin:0 1em;}
div.section h2{height:40px;}
div.footer>*{margin-left:210px;position:relative;top:120px;}
div.section div.section:target{height:300px;min-height:300px;margin-top:-150px;padding-top:150px;}
div.section div.section+div.section:target{margin-top:-180px;padding-top:180px;}
div.section div.section+div.section+div.section:target{margin-top:-210px;padding-top:210px;}
div.section div.section+div.section+div.section+div.section:target{margin-top:-240px;padding-top:240px;}
div.section div.nav a:active{background-color:red;}
div.section h2{background-color:white;}
#SECTION1{background-color:rgb(200,255,255);}
#SECTION1 h3{background-color:aqua;}
#SECTION2{background-color:rgb(255,200,255);}
#SECTION2 h3{background-color:fuchsia;}
#SECTION3{background-color:rgb(225,255,200);}
#SECTION3 h3{background-color:lime;}
#SECTION4{background-color:rgb(255,255,200);}
#SECTION4 h3{background-color:yellow;}
div.section div.section h3 a{display:block;width:100%;height:100%;text-decoration:none;color:black;}
-->
_</style>
No.4
- 回答日時:
ちょっと時間が取れたのでサンプル
★CSS3の:target擬似クラス使ってますので、古いブラウザにも使うならjavascriptでも
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェック済みHTML4.01strict + CSS3(:targetのみ)
★タブは_に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{width:100%;height:100%;position:relative;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
h3{height:30px;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.header{position:fixed;top:0;left:0;height:100px;border-bottom:ridge 3px gray;background-color:white;z-index:10;}
div.section{position:relative;top:110px;}
div.section div.nav{position:fixed;left:0;top:110px;width:200px;height:100%;border-right:ridge 3px gray;}
div.section h2,div.section p{margin-left:210px;}
div.section div.section{width:auto;min-width:0;margin:0 0 0 210px;padding:0;position:static;overflow:hidden;height:30px;}
div.section div.section p{margin:0 1em;}
div.section h2{height:40px;}
div.footer>*{margin-left:210px;position:relative;top:120px;}
div.section div.section:target{height:300px;min-height:300px;margin-top:-150px;padding-top:150px;}
div.section div.section+div.section:target{margin-top:-180px;padding-top:180px;}
div.section div.section+div.section+div.section:target{margin-top:-210px;padding-top:210px;}
div.section div.section+div.section+div.section+div.section:target{margin-top:-240px;padding-top:240px;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<div class="section" id="SECTION1">
___<h3>1項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SECTION2">
___<h3>2項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SECTION3">
___<h3>3項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="SECTION4">
___<h3>4項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="nav">
___<ol>
____<li><a href="#SECTION1">1項</a></li>
____<li><a href="#SECTION2">2項</a></li>
____<li><a href="#SECTION3">3項</a></li>
____<li><a href="#SECTION4">4項</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
書き込みありがとうございます!
1ページでこんな表示ができるなんて、知らなかったです!
びっくりしました。
勉強になります。。
対象ブラウザバージョンが古くてie8なので
javascriptを探してみます。
No.3
- 回答日時:
menu.html でリンクを押すと、a.html 内で load または hashchange のイベントが発生します。
ここで URL 内に hash の値が有るならば、対応する中身を展開する、でいかがでしょうか
// a.html
$(window).on('load hashchange', function(){
if (location && location.hash) 展開(location.hash);
});
// 動作イメージ
a.html が表示される
→ イベント load が発生
→ hash が無いので、なにもしない
menu.html で、リンク a.html#title1 が押される
→ イベント hashchange が発生
→ hash == "#title" なので、展開("#title1") が実行される
menu.html で、リンク b.html が押される
→ menu.html で、リンク a.html#title1 が押される
→ イベント load が発生
→ hash == "#title" なので、展開("#title1") が実行される
hashchange は古いブラウザで動かない問題がありますが、
その場合は以下の jQuery プラグインを併用してください
http://benalman.com/projects/jquery-hashchange-p …
書き込みありがとうございます!
展開、とあるのはリンク元のメニュー名ですよね。
それが複数ある場合(メニュー1、メニュー2・・)は
その数分記述すればいいのでしょうか。
No.2
- 回答日時:
フレームを使うなと頭ごなしに言うつもりはありませんし、フレームを使ってもご所望のことはできますが、明らかに難易度が高くなります。
実装方法は、JavaScriptを使って異なるフレームと通信することになります。つまり、javascriptをご存じない方が選択する方法ではありません。フレームを使わずにページを作れるのであれば、あるいは、CSSだけで目的を達成できるようになるかもしれません。
書き込みをありがとうございます。
このサイトは社員閲覧用ページで、依頼者からフレーム指定で
きているので変更ができないのです。。
フレームを死守したいのであれば、実装にはハードルが高そうだということですね。
フレームを使わずにCSSだけで目的達成できるかも、とは
ターゲット疑似クラスのことでしょうか。
No.1
- 回答日時:
そもそもフレームは使うべきではありません。
1999年(15年前)のHTML4.01の勧告以来、frameは非推奨です
「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
ですし、フレームには様々な問題があります。
HTML フレーム 問題( https://www.google.co.jp/search?q=HTML%20%E3%83% … )
「JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。ggogle-ウェブマスター向けガイドライン( https://support.google.com/webmasters/answer/357 … )」
それでももフレームはここでも、一年に数回は話題として登場していますね。
とにかくHTMLは単純に文書構造だけを記述します。
そのうえで、スタイルシートで実現しましょう。
★最も率直な方法は、それぞれの内容を記したHTMLを作成し、共通なメニューからそれぞれのページにリンクさせること。
断然有利で分かりやすい方法です。最もベストな方法です。(面倒臭いだけ)
リンク先のタイトルもきちんと書いてあれば、それぞれのページが検索エンジンにもわかりますし
利用者がブックマークしてもきちんとブックマークできる。
共通なメニューはスタイルシートで各ページでデザインします。
ページ数が多い場合は、SSIなどを使用してincludeするか、ページ自体をサーバー側で出力させる。
★コンテンツの量が少ないときは率直にスタイルシートで実装しても良いでしょう。
実に様々な方法があります。
いずれにしろ、まずどのようにプレゼンテーションするかは忘れて、きちんとHTMLを書きましょう。
書き込みをありがとうございます。
情報が不足してすみません。
このページは社内閲覧用でして、外部に出すことはないサイトになります。
依頼者(社員)がフレームが好みのためこの作りになっていて、変更はできないので、やりたいことの実現は難しそうですね。。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryを使ったスムーススクロ...
-
CSSでreadonlyの機能はあり...
-
JavascriptでDom XSSの脆弱性対...
-
「ご処理進めて頂きますようお...
-
メルカリのメルカードで買い物...
-
エクセルで、日付を入力すると...
-
CloseとDisposeの違い
-
エクセルVBAで、MsgBox やInput...
-
VBAでループ内で使う変数名を可...
-
Excelシート上のマクロを登録し...
-
文字列で小数点以下の0を削除し...
-
VBA SaveChanges 上書きされない
-
【Excel】特定の文字を含むセル...
-
DoEventsがやはり分からない
-
生成AI画像について
-
VBAにてメッセージボックスを最...
-
アクセスVBAのMe!と[ ]
-
Webアプリや業務アプリのデータ...
-
「PC Helpsoft Driver Updated...
-
UPS警告音を止めたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Q&A掲示板の入力フォームに文字...
-
JavascriptでDom XSSの脆弱性対...
-
【JavaScript】検索がヒットし...
-
CSSでreadonlyの機能はあり...
-
JavascriptでXSSの脆弱性への対...
-
formのsubmitを押すとモーダル...
-
特定の条件のHTML要素を一括で...
-
JavascriptのHTMLクラス表示に...
-
確認ダイアログを次からは表示...
-
jQueryでのドラッグアンドドロ...
-
javascriptで複数の表示・非表...
-
jqueryを使ったスムーススクロ...
-
javascriptのエラーで質問です。
-
改行をしたいが、<br>と...
-
jqueryアコーディオンの上部の...
-
JavaScriptのdiv.style属性の変...
-
2回目以降のページロード時には...
-
jQueryのCSSで値に変数を使う方法
-
クリックすると、色が変わるよ...
-
動画の上に広告をオーバーレイ...
おすすめ情報