Css 将两个ID放在一个a href中_Css

Css 将两个ID放在一个a href中

css

Css 将两个ID放在一个a href中,css,Css,我正在尝试制作一个按钮，用CSS改变两件事。首先，它将使文本出现，其次，它将使文本顶部的图像消失。我试过很多方法，但都无法成功。任何帮助都将不胜感激。 Css是 p { color:#591865; text-align:center; opacity:0; } p:target { color:# a1a100; opacity:1; -webkit-transition: opacity 1s linear; } #image {

我正在尝试制作一个按钮，用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>




三号
第四名

感谢您的任何意见

类似的内容？（我在这里使用jQuery，但同样的想法可以很容易地应用于常规javascript）


函数切换可见（textId、imageId）{
$（“#”+textId.show（）；//应该是分号
$（“#”+imageId）.hide（）；
}

像这样的东西？（我在这里使用jQuery，但同样的想法可以很容易地应用于常规javascript）


函数切换可见（textId、imageId）{
$（“#”+textId.show（）；//应该是分号
$（“#”+imageId）.hide（）；
}

这是不可能的，因为它是当前编写的。要以这种方式影响两个不同的元素，需要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>

如果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';
    };
}

var links=document.querySelectorAll（'nav>a'），
image=document.getElementById（'image'）；
对于（var i=0，len=links.length；i这是不可能的，因为它是当前编写的。要以这种方式影响两个不同的元素，需要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>


如果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';
    };
}

var links=document.querySelectorAll（'nav>a'），
image=document.getElementById（'image'）；
对于（var i=0，len=links.length；i您不能在一个href中创建两个ID，因为a#href使浏览器聚焦于您链接到的对象，因此如果您指向两个对象，浏览器无法同时聚焦它们
例如：假设您放置两个HREF来输入文本，两个文本都将被聚焦？当您键入时，它会在两个文本上输入相同的内容吗
您可以使用javascript：
<a href="#" onclick="toggleVisible('one', 'image')">One</a>
<script type="text/javascript">
    function toggleVisible( textId, imageId ) {
        $( "#" + textId ).show().
        $( "#" + imageId ).hide();
    }
</script>


函数切换可见（textId、imageId）{
$（“#”+textId）.show（）。
$（“#”+imageId）.hide（）；
}

当然，您必须包括jquery：
您不能在一个href中创建两个ID，因为a#href使浏览器聚焦于您链接到的对象，因此如果您指向两个对象，浏览器无法同时聚焦它们
例如：假设您放置两个HREF来输入文本，两个文本都将被聚焦？当您键入时，它会在两个文本上输入相同的内容吗
您可以使用javascript：
<a href="#" onclick="toggleVisible('one', 'image')">One</a>
<script type="text/javascript">
    function toggleVisible( textId, imageId ) {
        $( "#" + textId ).show().
        $( "#" + imageId ).hide();
    }
</script>


函数切换可见（textId、imageId）{
$（“#”+textId）.show（）。
$（“#”+imageId）.hide（）；
}

当然，您必须包括jquery：
我试图完成一件类似的事情，即使用css仅显示\隐藏使用锚定的项目，而目标选择器
我没有时间为这个问题创建一个具体的例子，但我相信你能找到答案……；）
这是小提琴
(http://jsfiddle.net/pB72f/)

我试图完成一个类似的事情，即使用css只显示\隐藏使用锚的项目，而目标选择器
我没有时间为这个问题创建一个具体的例子，但我相信你能找到答案……；）
这是小提琴
(http://jsfiddle.net/pB72f/)

正如david Thomas所说，您不能将2个id放入url，但是有一个复杂的css解决方案，它不需要javascript。在您的提案中，您有四个a标签，因此页面可以处于四个单独的状态。将父div中的所有4个p标记包装在4个嵌套的span标记中，并使用每个状态的id标识每个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>

这是因为您的目标是要创建的所有元素的父元素
控件从url中删除。因为你需要四个身份证，你只能放一个身份证
因此，在单个图元上，需要嵌套4个环绕的跨度图元，
要控制其css的元素
祝你一切顺利。TJE
正如david Thomas所说，您不能将2个id放入url，但有一个复杂的css解决方案，它不需要javascript。在您的提案中，您有四个a标签，因此页面可以处于四个单独的状态。将父div中的所有4个p标记包装在4个嵌套的span标记中，并使用每个状态的id标识每个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>

这是因为您的目标是要创建的所有元素的父元素
控件从url中删除。因为你需要四个身份证，你只能放一个身份证
因此，在单个图元上，需要嵌套4个环绕的跨度图元，
要控制其css的元素
祝你一切顺利。TJE
No；您只能使用元素链接到一个目标。href
没有逗号分隔，只是一个，在本例中无效，href
/url
。否；您只能使用元素链接到一个目标。href
没有逗号分隔，只是一个，在本例中无效，href
/url
。定义“不走开”吗？您在CSS中使用了opacity
，因此我假设您希望图像占据“物理”空间；你想让它变成这样吗？还是基于CSS的版本有问题？最好的答案。。先告诉我CSS解决方案。还有不推荐jQuery做这么简单的事情的道具。@DavidThomas它不是。。。对不起，我应该指定的。它应该“漂浮”在其他物体之上然后消失