css ul li选择项目问题

我仍然在学习CSS，我试图将li设置为活动并将样式应用于它。所以基本上，我希望li风格在点击后坚持下去。我做了一些搜索，发现了下面的CSS，但它不适合我。css ul li选择项目问题

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

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

jsfiddle code

任何帮助将衷心感谢。

菲利普

来源

2014-03-13 Phillip Turner

你没有提供的的jsfiddle的js代码，从而为坎特拉说我们可以只是猜测，但忽略我会尽力点你出了正确的方向。你将需要javascript/jq来做到这一点，你可能可以使用css hovers和-webkit-animation-fill-mode: forwards;来做到这一点，但是没有什么我可以快速提出，但请记住，除了在移动浏览器中，hover不是点击，所以除非有人提出了一个聪明的想法，我会给你一个简单的方法使用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/

好运气=）

来源

2014-03-13 02:48:17 Zagen

它的一个新的URL，http://jsfiddle.net/zDNN9/10/ –

我还在学习jQuery的作为好。这是一个非常优雅的解决方案，效果很好。非常感谢@Zarich –

欢迎您，继续努力，前端开发非常酷，一旦你获得了基础知识=），这个代码可以得到改进，但对于这种特殊情况，它应该是应该的，祝你好运。 – Zagen

我做了一个修改并添加了对您的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'); 
});

来源

2014-03-13 03:02:53 jmgem

css ul li选择项目问题

回答

相关问题