把两个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