特にニュースサイトでよく見かけるのですが、テキストの全文が長いときに初めは数行のみ表示しておき「続きを読む」あるいは「全文表示」、「詳細表示」といったリンクボタンを押すとサッと全文が現れるというしくみを自サイトでも実現したいと考えています。
文章が部分表示されている最初のページが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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- au(KDDI) 特定の画面を見るとスマホが固まります ご覧頂き有難うございます。 特定のページを見るとスマホが固まり 1 2023/08/21 19:29
- Visual Basic(VBA) VBAで早押しゲームを作りたい 4 2022/05/12 13:46
- Excel(エクセル) マクロでボタンにつける名前がどこに設定されているかわからないケースがありました。 1 2023/06/19 19:37
- Word(ワード) Word のマクロについての質問です。 ボタンを押すと登録したブックマーク先にジャンプする機能(リン 3 2023/08/16 12:17
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- PHP PHP MySql ページング 2 2022/09/20 06:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アクセス時からのカウントダウ...
-
pdfに丸秘などのスタンプを...
-
javaScriptのコードの修正をお...
-
C#OpenCv V4にのエラーに関する...
-
gas スプレッドシートがアクテ...
-
船のゲームを作っているのです...
-
JavaScriptでテーブル内?に矢...
-
このスクリプトにアレンジを加...
-
ジェネレーターの作り方
-
ショッピングカートをついてこ...
-
イベントが初めの一回しか起き...
-
google apps scriptの終了のさせ方
-
html javascript リンク先アド...
-
HTMLで作った時報アプリが動き...
-
択一形式のテストをつくりたいです
-
jqGridについて
-
GASでundefinedエラーが出ます
-
HTMLにWSHを組み込む
-
getElementByIdでASP.NETのText...
-
特定のclassを表示、非表示にする
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報