人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CGIで動的に生成されるユニークな1ページのみにハイパーリンク付のテキストが表示され、他のページにはそのテキストは表示されない仕組みの JavaScriptとCSSの書き方を教えてていただけますでしょうか?

CGI本体には手を付けないという条件になります(手を付けた場合かなり複雑になるかと思い、思ったように作動しないときのリカバリーに手がかかりそうゆえ)

JavaScriptでURLのパラメータを抽出し(パラメータは/detail.cgi?page=1&status=viewのうちpage=1の数字部分が変化します ただpage=10やpage=11も存在しますのでpage=1&まで抽出して条件判断できればと思います

CSSは属性セレクタのE[foo*=”bar”]が利用できるのでしょうか?

よろしくお願いいたします

●質問者: pucca9x9
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

こんな感じで。

<html>
<body>
<!-- パラメータに page=1 が入っているときだけ表示されるリンク -->
<a href="..." class="shy_link">aaaaaaaaaa</a>
<a href="..." class="shy_link">aaaaaaaaaa</a>
<a href="..." class="shy_link">aaaaaaaaaa</a>

<!-- 普通に表示されるリンク -->
<a href="...">bbbbbbbbbb</a>
<a href="...">bbbbbbbbbb</a>
<a href="...">bbbbbbbbbb</a>
</body>

<!-- ここから、追加する css と javascript -->
<style>
a.shy_link {
 display: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
 var mat = /page=(\d+)\b/.exec(location.search);
 if (mat && mat[1] == 1) {
 Array.from(document.querySelectorAll("a.shy_link")).forEach(function(a) {
 a.style.display = "inline";
 });
 }
});
</script>
</html>

page=1 のときにだけ表示しするリンクには、class="shy_link" を指定します。




追記です。

実はうまくいかないため設置の仕方がまちがえていないか いろいろチェックしなおしておりました

すみません。
javascript の部分を、以下のものに差し替えてください。

window.addEventListener("DOMContentLoaded", function() {
 var mat = /page=(\d+)\b/.exec(location.search);
 if (mat && mat[1] == 1) {
 Array.prototype.forEach.call(document.querySelectorAll("a.shy_link"), function(a) {
 a.style.display = "inline";
 });
 }
});

Array.from() が正式な仕様になっていないのを失念しておりました。


pucca9x9さんのコメント
a-kuma3 様 とても貴重なご回答ほんとうにありがとうございました お礼が遅くなりまことに申し訳ありません 実はうまくいかないため設置の仕方がまちがえていないか いろいろチェックしなおしておりました matの値ですがalert(mat);で見たところpage=1,1と表示されるのですが これはこれでよいのか判断がつきません よろしくお願いいたします

a-kuma3さんのコメント
>> 実はうまくいかないため設置の仕方がまちがえていないか いろいろチェックしなおしておりました << すみません。 [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from:title=Array.from()] が正式な仕様になっていないのを失念しておりました。 回答に追記しましたので、確認をお願いします。

pucca9x9さんのコメント
早々のお返事ありがとうございます 動作を確認いたしました 厚くお礼申しあげます
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ