2017-08-23 5 views
0

を使用せずに、別の隠されたdivの中にある特定のdivに行きますは、私は、タブのグリッドがあり、各タブはデフォルトで非表示になっているアイテムを持っているページを更新して、クッキーに

#item1, #item2, #item3 etc. 

IDがCMSから来ているとあなたが重複したIDを持っているので、変更することはできません。#1 ITEM1は#tab1のと#のTAB2の両方にdiv要素を参照することができます。

ユーザーは#tab2をクリックし、#tab2を表示します。 urlはexample.com/page#tab2に変更され、そのタブ内の項目(#item5)をクリックすると項目全体が表示されます。 URLはexample.com/page#item5になります。

ユーザーがそのページを更新する場合は、tab2にitem5を表示します。

クッキーなしでも可能ですか? IDの変更やデータ属性の挿入ができないので、ページのリロード時に希望のアイテムをどのように表示するかわかりません。

+1

クッキー/ローカルストレージ/すべてのデータストアを回避策として使用することは可能でしょうが、間違って設計されたURLフラグメントと重複する「id」属性が原因で発生します。私はあなたの時間がそれらの問題に対処するより良いことをお勧めします。 –

+0

@RoryMcCrossan重複したIDについて何もできません.HTMLは変更できないためです。しかし、「URLフラグメントの設計が間違っている」とはどういう意味ですか?どのようにURLを改善できますか? –

+1

親タブとアイテムの両方をフラグメントに配置します。 '#tab2-item5' –

答えて

1

var currentTabId = location.hashのようにページが読み込まれると、URLハッシュを取得できます。

その後、idcurrentTabIdに等しいdiv要素にページをスクロールできます。

+0

currentTabIdはどのように分かりますか? –

+0

たとえば、両方のidを 'location.hash'に追加し、ページが読み込まれるときに解析することができます –

1

はそれが可能にURLスキーマを変更することです:

domain.ext /あなたはURLを解析した後、これは、JSで簡単に解けるだろう

ページ#のTABS2 /#のitem5。

関連する問題