CSSを用いて表示内容の切り替えをした際の問題

こちらを参考にして表示内容を切り替えるようにしました。
しかし、構造上自動でindex.html#Japaneseのようにハッシュ値を付与しなければならないので、.htaccessを利用しindex.htmlからindex.html#Japaneseに301リダイレクトをすればできると思い実行した所失敗しました。
JavaScriptを利用すれば可能かと考えましたが知識がないためどなたかお知恵をお貸しください。
よろしくお願いします。

HTML
1<style>
2.content {
3  display: none;
4}
5
6.content:target {
7  display: block;
8}
9</style>
10<a href="#Japanese">日本語</a><a href="#English">英語</a><a href="#Chinese">中国語</a>
11<div id='Japanese' class='content'>
12日本語
13</div>
14<div id='English' class='content'>
15英語
16</div>
17<div id='Chinese' class='content'>
18中国語
19</div>

試したもの

<Files ~ "^.ht">
deny from all
</Files>

# Redirect
Redirect permanent /index.html http://sample.com/index.html#Japanese

→「多くのリダイレクトが発生しました」

<Files ~ "^.ht">
deny from all
</Files>

# Redirect
Redirect permanent /index.html http://ユーザー名.starfree.jp/index.html#Japanese

RewriteCond %{REMOTE_ADDR} !=157.112.187.101

→「多くのリダイレクトが発生しました」

こちらで再度質問しました。

m.ts10806

2018/07/14 05:57

せめて自身が書いたコードを提示しましょう。タイトルが「表示の切り替え」で質問内容が「内容を切り替える」で若干ずれています。何をどうしたいのか、要件を具体的に記載してください。

yaschi

2018/07/14 06:07

追記させていただきました

m.ts10806

2018/07/14 06:11 編集

(２回目)タイトルが「表示の切り替え」で質問内容が「内容を切り替える」で若干ずれています。何をどうしたいのか、要件を具体的に記載してください

yaschi

2018/07/14 06:18

記載いたしましたがまだ不十分でしょうか？

m.ts10806

2018/07/14 06:20

１文ずつしか読まれませんかね…

yaschi

2018/07/14 06:21

具体的という意味がわかりません。IDを自動的に付与したい。これ以上具体的な要件というのが私自身思いつきませんが

m.ts10806

2018/07/14 06:29 編集

できれば.htaccessで何をしようとしたかも知りたいですけどね。基本サーバー側のことしか関知しないものなので、どこからその情報を得て何をやろうとしてどう失敗したのか。JavaScriptで出来そうという見込みがあるのでしたら知識がないなりにある程度調べてやってもらいたいところです。「やってみたこと」具体的なコードの提示もないので丸投げとなっています。

m.ts10806

2018/07/14 09:01

「URLハッシュ値による切り替え」が目的かと思いましたがそうではないようですね。それならすぐ回答がつくはずなので。やはり要件が不十分です。「日本語にする」「中国語にする」「英語にする」など言語切り替え？のトリガーは何でしょう？URLに何もない場合はどうするのか、ハッシュ値あるけど感知していない言語、めちゃくちゃな文字列が渡されたらどうするのか、そこも含めないと回答が難しいです。

yaschi

2018/07/14 14:19 編集

おっしゃる通りハッシュ値による表示内容の切り替えについての質問です。切り替えのトリガーは編集しましたがaタグで実装しています。ハッシュ値が何もない場合やめちゃくちゃな文字列が渡された場合は何も表示しなくと良いと考えています。

行動規範の内容に同意します

回答4件

:target疑似クラス

.content の順番を変更すれば、CSSのみでも実装可能です。
(元の順番を維持するのであれば、:has() が実装される必要があります)

:target疑似クラスで display: none - JSFiddle

HTML
1<style>
2.content:target~#Japanese, #English:not(:target), #Chinese:not(:target) {
3  display: none;
4}
5</style>
6</head>
7<body>
8<a href="#Japanese">日本語</a> <a href="#English">英語</a> <a href="#Chinese">中国語</a>
9<div id='English' class='content'>英語コンテンツ</div>
10<div id='Chinese' class='content'>中国語コンテンツ</div>
11<div id='Japanese' class='content'>日本語コンテンツ</div>

URLハッシュを使う是非

ただし、言語判定にURLハッシュを使うと、ページ内リンクが事実上できなくなり、ユーザビリティが低下します。
言語別にコンテンツ表示を振り分ける意図が読める為、大きなコンテンツを入れる場合には :target 疑似クラスで実装するのは避けた方が良いと私は思います。

サーバサイドスクリプトでGETパラメータを見て振り分ける
静的コンテンツを言語別に用意する

Re: yaschi さん

投稿2018/07/15 07:56

think49

総合スコア18162

提示コード確認しましたが、ご提示の:target疑似要素でもおおよそ問題ないように思いますが
どこでしょうか？
「URLに何もない、または存在しない値が指定されればJapanese表示」としたいのでしたら、
何とかならないこともないかと思いますが・・・。

簡単にやるならやはりJavaScriptですね。IDもついてますし。
location.hashでURLのハッシュ値がとれます。
そのハッシュ値にあたるIDをもった要素の有無で表示非表示を決めると良いです。
コードを例示しますが、簡潔に書くためにjQueryにしてあります。

js
1$(function(){
2    var hash = location.hash;
3    if($(hash).length > 0){
4        $(hash).show();
5    }else{
6        $("#Japanese").show();
7    }
8});