Question

我还在学习CSS，我正在尝试将li设置为活动状态并为其应用样式。所以基本上，我希望li风格一旦点击就坚持下去。我做了一点搜索，发现了以下css，但它对我不起作用。

ul#[Id-Here] li a:hover,ul#[Id-Here] li.active a
{
  // here styling 
}

我在嵌入所有HTML和CSS时遇到问题，所以我将代码添加到了jsfiddle。

jsfiddle code

感谢任何帮助。

菲利普

Answer 1

你没有在jsfiddle中提供js代码，所以cantera说我们可以猜测，但忽略了我会试着指出你正确的方向。你需要使用javascript / jq才能做到这一点，你可能可以使用css hovers和-webkit-animation-fill-mode: forwards;来做到这一点，但是没有什么能够提升到足够快的速度，请记住，除了移动设备外，不会有点击浏览器，所以除非有人想出一个聪明的css想法，我会用jq给你一个简单的方法。

<强> HTML

<div id="tab-box-container">
        <ul id="tab-header">
            <li class="class="selected"">Overview</li>
            <li>Network</li>
        </ul>
        <div id="tab-content-container">
            <div  class="tab-content">
                <h3>Tab 1</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
            <div  class="tab-content hidden">
                <h3>Tab 2</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>
        </div>
</div>

<强>的js

var tabs = $('#tab-header li');
var tabContent = $('.tab-content');
tabs.click(function(){
  var index = tabs.index( this );
  tabs.removeClass('active');
  $(this).addClass('active');
  tabContent.addClass('hidden');
  $(tabContent[index]).removeClass('hidden');
});

现在，您不需要为每个标签与标签内容ID配对使用 ID ，您只需将它们按顺序放置，第一个标签将与第一个标签匹配 - 内容，等等......

这是最后一个jsfiddle http://jsfiddle.net/zDNN9/16/

祝你好运=）

Answer 2

我进行了调整并向你的jsfiddle添加了一些东西。如果要在单击时将类附加到选项卡，则需要使用javascript（或某些库）。我已经为你包含了jQuery。

看看这个并看看它是否符合您的要求：http://jsfiddle.net/zDNN9/12/

$('ul#tab-header li a').on('click', function() {
    $('ul#tab-header li a').removeClass('selected');
    $(this).addClass('selected');
});

css ul li选择了项目问题

2 个答案: