特にニュースサイトでよく見かけるのですが、テキストの全文が長いときに初めは数行のみ表示しておき「続きを読む」あるいは「全文表示」、「詳細表示」といったリンクボタンを押すとサッと全文が現れるというしくみを自サイトでも実現したいと考えています。
文章が部分表示されている最初のページが01a.htmlだとしてボタンを押すと全文が記載されている01b.htmlが表示されるというしくみではどうやらなく、ソースを見るとJavascriptを使っているのでしょうか、あらかじめ用意してあった<div>~</div>がボタンクリックで表示されるらしいのです。
当方のサイトにおいてこのしくみを実現したいページ数がけっこうあり、いちいちaページ、bページを用意するとファイル数が倍になるので「別ファイルを用意する」という方法は避けたい。
実現する方法を具体的にご教授ください。
※<div>タグにはこだわりません。
参考URL
http://headlines.yahoo.co.jp/hl?a=20071116-00000 …
No.1ベストアンサー
- 回答日時:
参考URL内にあったHTMLを読んでみると
http://i.yimg.jp/lib/news/yjnews_util_1_4.js
というスクリプトがリンクされていました.
そこで続きを読む部分のdivタグのidであるfoldLinkを上記スクリプト内で検索すると,
以下の部分が関係ありそうです.
function yjNfold_init() {
var artObj = yjNgetElement("artFold");
if (artObj) {
artObj.style.display = "none";
}
var linkObj = yjNgetElement("foldLink");
if (linkObj) {
var linkHtml = '<a href="#" onClick="yjNfold_change(' + "'op'" + ');return false">[続きを読む]</a>';
linkObj.innerHTML = linkHtml;
}
}
function yjNfold_change(state) {
var artObj = yjNgetElement("artFold");
if (artObj) {
if (state == 'op') {
artObj.style.display = "block";
} else if (state == 'cl') {
artObj.style.display = "none";
}
}
var linkObj = yjNgetElement("foldLink");
if (linkObj) {
var linkHtml = '';
if (state == 'op') {
linkHtml = '<a href="#" onClick="yjNfold_change(' + "'cl'" + ');return false">[記事を折りたたむ]</a>';
} else if (state == 'cl') {
linkHtml = '<a href="#" onClick="yjNfold_change(' + "'op'" + ');return false">[続きを読む]</a>';
}
linkObj.innerHTML = linkHtml;
}
}
どうやら[続きを読む],[記事を折りたたむ]のリンクを押した場合にcssのdisplayプロパティを
blockとnoneで変化させているようです.
http://www.seo-equation.com/html/css/display
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VSCODE[Python]の設定について
-
JavaScript/HTML5での図形の描写
-
Google Apps Script で添付ファ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
このプログラムに、王手をかけ...
-
37分間のカウンター
-
javascriptでiframeのURL変更は?
-
C#OpenCv V4にのエラーに関する...
-
翌月を取得するGASが分かりません
-
表示されている地図の大きさに...
-
FCKeditorで画像登録ができませ...
-
<a>タグのテキストを取得
-
関数でy=g(x)のgとは何の略です...
-
Linux バイナリ実行できない "...
-
オブジェクト指向のsetTimeout...
-
javascriptで行を抽出したいです。
-
form内のinputタグのみロックす...
-
Boolean型配列中のTrueの有無を...
-
お世話になります。contentedit...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報