把兩個ID放在一個href

Question

我試圖做一個按鈕來改變CSS的兩件事。首先，它會使文字出現，其次它會使文字頂部的圖像消失。我嘗試了很多東西，但我無法實現它的功能。任何幫助將不勝感激。 的CSS是

p { 
    color:#591865; 
    text-align:center; 
    opacity:0; 

} 

p:target { 
    color:# a1a100; 
    opacity:1; 
    -webkit-transition: opacity 1s linear; 
} 

#image { 
    opacity: 1; 
    background-image:url(images/01.jpg); 
    height: 786px; 
    width:1024; 
} 

#image:target { 
    opacity:0; 
} 

和HTML是

<nav> 
      <a href="#one, #image">One</a> 
      <a href="#two, #image">Two</a> 
      <a href="#three, #image">Three</a> 
      <a href="#four, #image">Four</a> 
     </nav> 
     <div id="image"><img src="images/01.jpg"/></div> 
     <div> 
     <p id="one"><img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/></p> 
     <p id="two"><video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video></p> 
     <p id="three">Number Three</p> 
     <p id="four">Number Four</p> 
    </div> 
    </div> 

感謝任何輸入

Answer 1

這是不可能的，因爲它是目前寫的。以這種方式影響兩個不同的元素，將需要JavaScript。

<nav> 
<a href="#one">One</a> 
<a href="#two">Two</a> 
<a href="#three">Three</a> 
<a href="#four">Four</a> 
</nav> 
<div> 
    <p id="one"> 
     <img src="graphics/filler.png" width="281" height="128" onclick="javascript:playVideo1();"/> 
    </p> 
    <p id="two"> 
     <video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video> 
    </p> 
    <p id="three"> 
     Number Three 
    </p> 
    <p id="four"> 
     Number Four 
    </p> 
    <div id="image"> 
     <img src="images/01.jpg"/> 
    </div> 
</div>​ 

和附加：

不過，如果你能夠重新安排你的HTML（並願意有隻從更現代的瀏覽器的支持），那麼就可以用下面的HTML實現CSS選擇器：

p:target ~ #image { 
    opacity:0; 
}​ 

JS Fiddle demo。

如果JavaScript的一個選項，那麼以下工作：

var links = document.querySelectorAll('nav > a'), 
    image = document.getElementById('image'); 

for (var i=0,len=links.length; i<len; i++){ 
    links[i].onclick = function(e){ 
     image.style.opacity = '0'; 
    }; 
}​ 

JS Fiddle demo。

參考文獻：

1. CSS：

   • E ~ F, the general sibling combinator。

2. 的JavaScript：

   • getElementById()。
   • querySelectorAll()。
   • element.style。

Answer 2

像這樣的事情？ （我在這裏使用jQuery，但同樣的想法可以很容易地應用於常規的JavaScript）

<a href="#" onclick="toggleVisible('one', 'image')">One</a> 
<script type="text/javascript"> 
    function toggleVisible(textId, imageId) { 
     $("#" + textId).show(); //It should be semicolon 
     $("#" + imageId).hide(); 
    } 
</script> 

Answer 3

你不能讓一個單一的HREF兩個ID，因爲＃HREF使瀏覽器聚焦，鏈接，所以如果你點2個對象瀏覽器不能集中他們兩個的對象...

例如：

：想象一下，您將兩個hrefs添加到輸入文本中，兩者都將聚焦？當你輸入時它會在兩者上輸入相同的內容？

您可以使用JavaScript：

<a href="#" onclick="toggleVisible('one', 'image')">One</a> 
<script type="text/javascript"> 
    function toggleVisible(textId, imageId) { 
     $("#" + textId).show(). 
     $("#" + imageId).hide(); 
    } 
</script> 

當然

你必須包括jQuery的： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 4

我試圖完成類似的事情，用css只顯示\隱藏的物品即使用錨點和目標選擇器...

我沒有時間創建特定於此問題的示例，但我確定您可以找出它;;）

這裏的小提琴......

(http://jsfiddle.net/pB72f/) 

Answer 5

你不能把2點的ID到URL，就像大衛·托馬斯說，但它不需要JavaScript中的複雜的CSS的解決方案。在您的提案中，您有四個標籤，因此您有4個單獨的頁面可以使用的狀態。將所有4個p標籤，包含在父div中的4個嵌套span標籤中，併爲每個標籤標識每個span標籤然後狀態

<nav> 
    <a href="#oneimage1">One</a> 
    <a href="#twoimage1">Two</a> 
    <a href="#oneimage2">Three</a> 
    <a href="#twoimage2">Four</a> 
</nav> 
<span id="oneimage1"> 
    <span id="twoimage1"> 
     <span id="oneimage2"> 
      <span id="twoimage2"> 

       <div id="image1"><img src="images/01.jpg"/></div> 
       <div id="image2"><img src="images/01.jpg"/></div> 
       <div> 
        <p id="one">Number One</p> 
        <p id="two">Number ~Two</p> 
       </div> 
      </span> 
     </span> 
    </span> 
</span> 

的CSS將是這個樣子

span#oneimage1:target #image1 {Properties: values; go here } 
span#oneimage1:target #one {Properties: values; go here } 

span#oneimage2:target #image2 {Properties: values; go here } 
span#oneimage2:target #one {Properties: values; go here } 

span#twoimage1:target #image1 {Properties: values; go here } 
span#twoimage1:target #two {Properties: values; go here } 

span#twoimage2:target #image2 {Properties: values; go here } 
span#twoimage2:target #two {Properties: values; go here } 

這工作，因爲你的目標你想從URL 控制元素的父。因爲你需要四個id，你只能在一個元素上放置一個id爲 ，所以你需要嵌套4個span元素， 你想控制的css元素。

所有最好的。 TJE