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。

但是，如果您能够重新排序HTML（并且只愿意从更现代的浏览器获得支持），那么可以使用以下HTML实现它：

<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>

附加的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

参考文献：

CSS：
- E ~ F, the general sibling combinator。
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放入网址，正如大卫托马斯所说，但有一个复杂的css解决方案，不需要javascript。在您的提案中，您有四个标签，因此您有4个单独的状态，页面可以在。包装所有4个p标签，在4个嵌套span标签中的父div内，id为每个span标签，每个人都有一个id状态

<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 }

这是有效的，因为您的目标是您希望的所有元素的父级从网址控制。因为你需要四个id，你只能放一个id 因此，在单个元素上，您需要嵌套4个包含的span元素，你希望控制其css的元素。

一切顺利。 TJE

把两个id放在一个href中

5 个答案: