2015-12-27 27 views
0

首先讓我介紹一下,我對html,CSS等知之甚少。我能做的大部分事情都是通過其他例子。我正在做一個標題菜單,每個鏈接都是頁面中的一個錨點。 (div被隱藏,直到點擊)然而,我陷入了這個問題。我有頁面內鏈接如下:已錨定頁面的錨?

<div class="header"> 
    <a href="#B1">Block 1</a> 
    <a href="#B2">Block 2</a> 
</div> 

這將給我的網址"localhost/test1.html#B1"。然而,其中一個div塊包含此:

<div id="B1"> 
    <a href="#slide-one"> 
    <a href="#slide-two"> 
</div> 

所以我已經想通了我不能做"localhost/test1.html#B1#slide-one"

我不知道是否有可能做到這個錨點鏈接已經打開爲錨點的頁面。沒有選擇使用任何jQuery,Flash,Java等我只能使用HTML/CSS。我會認爲這是不可能的,但我想最後一次嘗試嘗試這個並在這裏問。

編輯: 更新的樣本代碼提供更好的解釋:

<style type="text/css"> 
div#Menu { 
    height:90px; 
    left:0; 
    position:fixed; 
    top:-5px; 
    width:100%; 
    text-align:center; 
} 

div#B1 { 
    position:absolute; 
    left:-1000px; 
    margin-top:0; 
} 
div#B1:target { 
    top:100px; 
    left:375px; 
} 

div#B2 { 
    position:absolute; 
    left:-1000px; 
    margin-top:0; 
} 
div#B2:target { 
    top:100px; 
    left:375px; 
} 
</style> 
</head> 

<body> 
<!--Header Menu--> 
<div id="Menu" class="header"> 
    <a href="#B1">Block 1</a> 
    <a href="#B2">Block 2</a> 
</div> 



<div id="B1" class="blocks"> 
    <div id="Slider1" class="Slide"> 
     <ul> 
      <li id="slide-one"><img src="slide-one.png"/></li> 
      <li id="slide-two"><img src="slide-two.png"/></li> 
     </ul> 
     <a href="#slide-one">Slide 1</a> 
     <a href="#slide-two">Slide 2</a> 
    </div> 
</div> 

<div id="B2"> 
    <div id="Slider1" class="Slide"> 
     <ul> 
      <li id="slide-three"><img src="slide-three.png"/></li> 
      <li id="slide-four"><img src="slide-four.png"/></li> 
     </ul> 
     <a href="#slide-three">Slide 3</a> 
     <a href="#slide-four">Slide 4</a> 
    </div> 
</div> 

我有什麼是與縮略圖導航CSS圖像滑塊是每個部分中的錨。在菜單上,我去塊#1,它打開它包含一個圖像滑塊庫。我的頁面URL更改爲「test1.html#B1」圖像滑塊對每個圖像都具有錨點。

在一個單獨的普通頁面單獨滑塊會給頁面網址爲每個圖像類似「test1.html#滑動一個」。

但是這是嵌套的,並且圖像滑塊是「B1」塊的孩子。我需要打開塊#B1,在頁面打開後,我有圖像滑塊庫。每張圖片都有自己的錨點,但我需要「B1」來保留。

+4

一個錨將'取代'另一個。你希望發生的事情有兩個「有針對性」的獨特元素一次?爲頁面存儲狀態?僅使用HTML/CSS,通過ID定位元素會導致頁面滾動,導致該元素可見。我假設你不會想象這是兩個不同的可能。 – Phrogz

+0

你想做什麼? – j08691

回答

0

從你的問題是如何表達的,我們能想到的兩種不同的需求:既然你說你想要做localhost/test1.html#B1#slide-one這可能意味着你認爲#slide-one不僅存在於「上下文」

  1. #B1而且在其他地方(在#B2例如說):但如果發生這種情況就意味着#B1#B2是不是在同一個HTML頁面!所以它不可能是你想要的。

  2. 在對面,你的文字中所有的剩餘指示所有你想達到的部分是在同一個頁面。所以我會在下面解釋。

當在同一個HTML頁面,它不可能是幾個id s的相同值:id是唯一,通過設計。
其結果是:針對給定的id,您不需要幾個中間點,即使用戶真正使用了這些中間點(如您的示例中所示)。

總之,您在問題中顯示的代碼已經足夠完美了!

最後一點:如果id始終是唯一的,在對面,你可以有,你瞄準它出現的數量不受限制。換句話說,可以從幾個<a>指向同一個(唯一的)目的地。