0

jquery tabify http://unwrongest.com/projects/tabify/を使用して、メニューのタブのような機能を作成しています。

デモ: http://jsfiddle.net/janjarfalk/6Y6Pa/1/

こんなメニューを作っています。

<ul id="menu">
<li class="active"><a href="#contentHome">Home</a></li>
<li><a href="#contentGuestbook">Guestbook</a></li>
<li><a href="#contentLinks">Links</a></li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>

タブは私の URL へのアンカー リンクとして自動的に追加され、私の URL にあるものはすべて読み取られます。{domain name}/{controller}/{method}/{articleId}#contentLinks-tabなどの URL (リンク タブのみ) が必要です。例:

残りはhttp://www.test.com/site#home-tabなどになります。デモからわかるように、「{id}-tab」は ID に基づいて自動生成されます。ただし、既にリンク ページのhttp://www.test.com/links/shipping/5/#contentLinks-tabにいる場合に問題が発生し、ゲストブックやホームなどの他のタブに移動すると、 /shipping/5/#contentHome-tab が続きます。

リンク タブを表示していて、タブの残りの部分にカーソルを合わせている場合でも、/shipping/5/ を削除する方法を教えてください。申し訳ありませんが、私はそれを行う方法がわからないため、多くのコーディングを提供できませんでした。したがって、誰かがいくつかの光を照らすことができることに本当に感謝しています。どうもありがとう。

4

1 に答える 1

0

/shipping/5jsFiddle には明らかに URLの一部が欠けているため、これは答えるのが難しいものです。正しく理解できれば、基本的にプラグインの機能を変更しようとしています。

いずれにせよ、少しハックですが、hrefjavascript を使用してホーム リンクとゲストブック リンクの属性を変更してみてください。そのため、最初にホームとゲストブックのリンク ID を指定します。

<a href="#contentHome" id="home">Home</a>
<a href="#contentGuestbook" id="guestbook">Guestbook</a>

Tabify が初期化された後、jQuery を使用して URL を置き換えます。

$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');

これはhttp://www.test.com/site#contentHome-tab、などに相当し、URL の不要な部分を効果的に取り除きます。

または、それが機能しない場合 (jsFiddle でそのようなプラグインを使用している場合はわかりにくい)、さらにハックして、代わりに onclick リスナーを [ホーム] タブと [ゲストブック] タブに追加することができます。

$('#home').click(function() {
  window.location.href = "/site#contentHome-tab";
});​

私は通常、このようなことをすることはありませんが、プラグインを使用しているときは、目的の効果を達成するために少しハックする必要がある場合があります = P

お役に立てれば。

于 2012-07-09T04:35:10.777 に答える