dekapurio回答ポイント 300pt

JavaScriptについての質問です。ページ移行せずにタブで切り替えるページを作っています。まずは現在のコードが以下です。

■js
jQuery(function() {
var pages = jQuery('.section');
pages.hide();
if ( location.hash ) {
jQuery('html,body').scrollTop(0);
jQuery(location.hash).fadeIn();
} else {
pages.eq(0).fadeIn();
}
jQuery('.tab a').click(function(event){
event.preventDefault();
var nextPage = this.hash;
pages.hide();
jQuery(nextPage).fadeIn();
});
});
■HTML
<ul class="tab">
<li><a href="aaa#home"></li>
<li><a href="aaa#contact"></li>
</ul>
<div id="home" class="section"></div>
<div id="contact" class="section"></div>

現在の仕様としましては、
・タブをクリックしてもURLに#○○がつかない
・外部から直接 URL#○○にアクセスできる
となっていますが、要望としては、
・タブをクリックしてもURLに#○○がつかない（同じ）
・タブをクリックした際に、タブにクラス（current)を付ける
・外部から直接 URL#○○にアクセスできるが、URL表示には#○○がつかない
になります。
最後のURL表示については、そもそも無理な可能性があるのでスルーしていただいて、タブのクラス付けだけでも回答いただきたいと思います。どうぞよろしくお願いします。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

a-kuma32014/12/18 16:22:17
満足300pt
こんな感じでどうでしょう。
```
jQuery(function() {
    var pages = jQuery('.section');
    var target = location.hash;
    pages.hide();
    if ( target ) {
        jQuery('html,body').scrollTop(0);
        jQuery(target).fadeIn();
//      location.hash = "";      ★ハッシュ消しても、中途半端　(´・ω・｀)
        jQuery('.tab li a[href="'+ target + '"]').attr("class", "current");
    } else {
        pages.eq(0).fadeIn();
        jQuery('.tab li a').eq(0).attr("class", "current");
    }
    jQuery('.tab a').click(function(event){
        event.preventDefault();
        jQuery('.tab li a').attr("class", "");
        jQuery(this).attr("class", "current");
        var nextPage = this.hash;
        pages.hide();
        jQuery(nextPage).fadeIn();
    });
});
```
URL の # が残っちゃいますが、これを消すと home に飛んじゃいます...

HTML は、こんな感じ。
```
<ul class="tab">
<li><a href="#home">home</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#etc">etc</a></li>
</ul>
<div id="home" class="section">home</div>
<div id="contact" class="section">contact</div>
<div id="etc" class="section">etc</div>

<style>
.current {
    background-color: pink;
}
</style>
```
jsFiddle で試してみたのが、こちらです（ハッシュ付きで呼び出したときの動作が確認できませんが）。
http://jsfiddle.net/1e6g2qrt/
スター
- 4件のコメントを見る
- dekapurio 2014/12/18 17:32:30
  
  HTMLソースを見てclassが付かないなと格闘してたんですが、これって擬似的に？classがついてるんですね。物凄い思い込みをしていました。どれだけググってもうまくいかないはずですね。。
  class付けはうまくいきました！有難うございます。
  
  # については難しそうですね。上記だと外部からのアクセスが出来ないのと、他のプログラム（#contactはページの下のほうにあるんですが、スクロールする前にURLが変わるので止まってしまう）が動かなくなりました。
  
  上記コードのクラス付けだけのバージョンを教えていただければ幸いです。
  
  スター
- dekapurio 2014/12/18 17:40:06
  
  すいません。外部からのアクセスは出来ました。
  
  スター
- a-kuma3 2014/12/18 18:10:14
  上記コードのクラス付けだけのバージョンを教えていただければ幸いです。
  余計なこと、しなきゃよかったですね　＞＜。
  location.hash = "";
  の行を削除すれば、クラスの付け替えだけになります。
  回答のコードも修正しておきました。
  
  スター
- dekapurio 2014/12/18 19:00:08
  
  いえいえ、ありがとうございました。
  
  ちなみに見よう見まねで以下を試してみて、うまくいったように見えたんですが、やはり#以降が消えた時点でページの一番上へいってしまいました。
  jQuery(window).load(function(){
  location.hash = "";
  });
  
  他も色々と試してみたいと思います。
  有難うございました。
  
  スター

JavaScriptについての質問です。ページ移行せずにタブで切り替えるページを作っています。まずは現在のコードが以下です。

ベストアンサー

a-kuma32014/12/18 16:22:17
満足300pt

dekapurio 2014/12/18 17:32:30

dekapurio 2014/12/18 17:40:06

a-kuma3 2014/12/18 18:10:14

dekapurio 2014/12/18 19:00:08

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

JavaScriptについての質問です。ページ移行せずにタブで切り替えるページを作っています。まずは現在のコードが以下です。

ベストアンサー

a-kuma32014/12/18 16:22:17 満足300pt

dekapurio 2014/12/18 17:32:30

dekapurio 2014/12/18 17:40:06

a-kuma3 2014/12/18 18:10:14

dekapurio 2014/12/18 19:00:08

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

a-kuma32014/12/18 16:22:17
満足300pt