Question

我有一个挑战，我正试图解决。

我正在尝试创建一个页面，其中包含可在内容之间切换的标签，而不使用Javascript或内联/外部CSS。我想使用：target函数，但在这个实例中我可以使用CSS的绝对唯一方法是通过HTML中的style=""。

是否可以在页面之间切换（就像你用标签和JavaScript看到的那样），只使用CSS样式标签中的CSS3元素？

从字面上看，我甚至无法使用<style>。我可以使用CSS的唯一方法是通过<div style="">或通过另一个HTML标记的样式。

我知道这听起来很荒谬，但我认为这是一种挑战。只是好奇是否有可能。

好的，所以我想使用的代码如下：

<div id="container">
    <p style="text-align:center;">CSS3 TABS. <b><i>NO JAVASCRIPT </i></b></p>
    <div id="tabs">
        <ul>
            <li id="One"><a href="#One" id="first">One</a>
                <div>
                    <p>p1</p>
                </div>
            </li>
            <li id="Two"><a href="#Two" id="sec">Two</a>
                <div>
                    <p>p2</p>
                </div>
            </li>
            <li id="Three"><a href="#Three" id="third">Three</a>
                <div>
                    <p>p3</p>
                </div>
            </li>
        </ul>
    </div>
</div>

<strong>CSS</strong>
li div {
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    border: 1px solid #888888;
    float: left;
    opacity: 0;
    padding: 0 15px;
    position: absolute;
    visibility: hidden;
    width: 250px;
    left:0;
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
}

#tabs li a{
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
    border: 1px solid #888888;
    margin: 0 3px 0 0;
    padding: 5px 25px;
    position: relative;
    z-index:1;
    font-size: 14px;
    border-radius:10px 10px 0 0;
    display:block;
    top:1px;
}

#One:target div, #Two:target div, #Three:target div{
    opacity:1;
    visibility:visible;
}

到目前为止，我已经转换了除:target部分之外的所有内容。

<div id="container">
    <p style="text-align: center;">Test</p>
    <div id="tabs">
        <ul>
            <li id="One">
            <a href="#One" id="first"
            style="
            background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
            border: 1px solid #888888; margin: 0 3px 0 0; padding: 5px 25px; position: relative; z-index:1;
            font-size: 14px; border-radius:10px 10px 0 0; display:block; top:1px;
            ">
            One</a>
                <div style="-moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; border: 1px solid #888888;
                float: left; opacity: 0; padding: 0 15px; position: absolute; visibility: hidden; width: 250px; left:0;
                background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;">
                    <p>Page 1</p>
                </div>
            </li>
            <li id="Two">
            <a href="#Two" id="sec"
            style="
            background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
            border: 1px solid #888888; margin: 0 3px 0 0; padding: 5px 25px; position: relative; z-index:1;
            font-size: 14px; border-radius:10px 10px 0 0; display:block; top:1px;
            ">
            Two</a>
                <div style="-moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; border: 1px solid #888888;
                float: left; opacity: 0; padding: 0 15px; position: absolute; visibility: hidden; width: 250px; left:0;
                background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;">
                    <p>Page 2</p>
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 1

如果您在html中使用样式，则<style> ... </style>或<div style="..."> ... </div>只有两种方式。没有别的办法..

CSS3：仅具有HTML样式的目标

1 个答案: