Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kroll

CSS de abas com cantos arredondados ativos

Por , em Desenvolvimento frontend

Recommended Posts

kroll    0

kroll
Postado

Tenho um script de abas que muda automaticamente e quando selecionada seu background muda, mas como ela tem cantos arredondados não estou conseguindo fazer com que eles fiquem ativos também quando as abas mudam, somente quando o mouse fica hover. Segue o código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="js/tabcontent.js">
</script>

<style type="text/css">

.solucoes ul.abas a { font-family:"Lucida Sans Unicode", sans-serif; font-size:15px; color:#999; background:url('images/bg_meio_abas.jpg') repeat-x; height:41px; float:left; text-transform:uppercase; line-height:30px; margin-top:1px; outline:none; padding:0 3px;}
.solucoes .item a { font-size:11px}
.solucoes .item a:hover { text-decoration:underline}
.item a strong { color:#0069AA; font-size:12px}
.solucoes .bg_left, .solucoes .bg_right { background:url('images/bg_abas.jpg') no-repeat; width:9px; height:41px; float:left; margin-top:1px}
.solucoes .bg_right { background-position:-11px top}


.solucoes ul.abas .ativo a, .solucoes ul.abas li:hover a { color:#FFF; line-height:30px; background:url('images/bg_hover.png') repeat-x; height:30px; margin-top:0}


.solucoes ul.abas li a.selected{

background:url('images/bg_menu_meio_orange.png') repeat-x; height:41px;}

.solucoes ul.abas .selected .bg_left {background:url('images/sprites_hover_orange.png') no-repeat; width:9px; height:41px;}

.solucoes ul.abas .ativo .bg_left, .solucoes ul.abas .ativo .bg_right, .solucoes li:hover .bg_left, .solucoes li:hover .bg_right { background:url('images/sprites_hover.png') no-repeat; width:5px; height:30px; margin-top:0}
.solucoes ul.abas li:hover .bg_right, .solucoes ul.abas .ativo .bg_right { background-position:-10px top}
.destaques ul.abas .ativo a, .destaques ul.abas li:hover a { background:url('images/bg_menu_meio_orange.png') repeat-x; height:41px;}
.destaques ul.abas .ativo .bg_left, .destaques ul.abas .ativo .bg_right, .destaques li:hover .bg_left, .destaques li:hover .bg_right { background:url('images/sprites_hover_orange.png') no-repeat; width:9px; height:41px;}
.destaques ul.abas li:hover .bg_right, .destaques ul.abas .ativo .bg_right { background-position:-11px top}
#pettabs {
height:41px;}
</style>
</head>

<body>

<div class="displayDestaquesHomeVarejo">
<div id="pettabs" class="solucoes destaques">
<ul class="abas">
<li><div class="bg_left"></div><a href="#" rel="dog1" class="selected"><img src="images/titulo_promos.png" border="0" style="padding: 16px 10px  25px;" /></a><div class="bg_right"></div></li>
<li><div class="bg_left"></div><a href="#" rel="dog2"><img src="images/titulo_tv.png" border="0" style="padding: 16px 8px  25px;" /></a><div class="bg_right"></div></li>
<li><div class="bg_left"></div><a href="#" rel="dog3"><img src="images/titulo_internet.png" border="0" style="padding: 16px 8px  25px;" /></a><div class="bg_right"></div></li>
<li><div class="bg_left"></div><a href="#" rel="dog4" id="myfavorite"><img src="images/titulo_celular.png" border="0" style="padding: 16px 8px  25px;" /></a><div class="bg_right"></div></li>
<li><div class="bg_left"></div><a href="#" rel="dog5"><img src="images/titulo_telfixa.png" border="0" style="padding: 16px 8px  25px;" /></a><div class="bg_right"></div></li>
</ul>
<br style="clear: left" />
</div>




<div class="itens_solucoes box_planos tabcontent" id="dog1"> <ul class="item"><!-- PROMOÇÕES-->



               <li> <a href="#15666"><strong>Eu, scelerisque et! </strong><br />

               nunc porta etiam enim turpis magna nunc, nec! Pulvinar nascetur. Integer duis tincidunt in arcu et magna lorem facilisis.</a> </li>

                <li> <a href="#15675"><strong>Eu, scelerisque et! </strong><br />

                nunc porta etiam enim turpis magna nunc, nec! Pulvinar nascetur. Integer duis tincidunt in arcu et magna lorem facilisis.</a> </li> 

                <li> <a href="#15668"><strong>Eu, scelerisque et! </strong><br />

                 nunc porta etiam enim turpis magna nunc, nec! Pulvinar nascetur. Integer duis tincidunt in arcu et magna lorem facilisis.</a> </li>

                <li> <a href="#15670"><strong>Eu, scelerisque et!</strong><br />  nunc porta etiam enim turpis magna nunc, nec! Pulvinar nascetur. Integer duis tincidunt in arcu et magna lorem facilisis.</a> </li> 


             </ul> </div> 



<div class="itens_solucoes box_planos tabcontent" id="dog2"> <ul class="item"> <!-- TV-->

          <li> <a href="#"><strong>Eu, scelerisque et! </strong><br />

           Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li>

                  <li> <a href="#14513"><strong>Eu, scelerisque et! </strong><br />

                  Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

                  <li> <a href="#15678"><strong>Eu, scelerisque et! </strong><br />  
                  Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

                  <li> <a href="#14474"><strong>Eu, scelerisque et! </strong><br />

                    Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

      </ul> </div> 


<div class="itens_solucoes box_planos tabcontent" id="dog3"> <ul class="item"> <!-- INTERNET-->



               <li> <a href="#15668"><strong>Eu, scelerisque et! </strong><br />

               Montes sed facilisis parturient pulvinar eu purus massa. Tristique adipiscing, tincidunt sed nisi nisi habitasse etiam.</a> </li>  

                <li> <a href="#"><strong>Eu, scelerisque et! </strong><br />

                Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

              <li> <a href="#15670"><strong>Eu, scelerisque et! </strong><br />

                     Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

              <li> <a href="#14514"><strong>Eu, scelerisque et! </strong><br />

                     Montes sed facilisis parturient pulvinar eu purus massa. Tristique adipiscing, tincidunt sed nisi nisi habitasse etiam.</a> </li> 


               </ul> </div>



<div class="itens_solucoes box_planos tabcontent" id="dog4"> <ul class="item"> <!-- CELULAR-->



       <li> <a href="#15675"><strong>Eu, scelerisque et! </strong><br />

               Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li>

<li> <a href="#15666"><strong>Eu, scelerisque et! </strong><br />

Montes sed facilisis parturient pulvinar eu purus massa. Tristique adipiscing, tincidunt sed nisi nisi habitasse etiam.</a> </li> 



           <li> <a href="#15662"><strong>Eu, scelerisque et! </strong><br />

            Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

           <li> <a href="#"><strong>Eu, scelerisque et! </strong><br />

           Montes sed facilisis parturient pulvinar eu purus massa. Tristique adipiscing, tincidunt sed nisi nisi habitasse etiam.</a> 

           </li> 



        </ul> </div> 


<div class="itens_solucoes box_planos tabcontent" id="dog5"> <ul class="item">

											<!-- FIXO-->

             <li> <a href="#15474"><strong>Eu, scelerisque et! </strong><br />

         Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li><li> 

             <a href="#"><strong>Eu, scelerisque et! </strong><br />

          Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a> </li> 

            <li> <a href="#14048"><strong>Eu, scelerisque et! </strong><br />

          Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?</a>

		</li>    



           <li> <a href="#"><strong>Eu, scelerisque et! </strong><br />

            Pulvinar, vel rhoncus rhoncus, nunc? Tincidunt a porttitor dolor quis integer penatibus? Et. Et augue non tortor proin integer?

           </a> </li> 

       </ul> </div>
</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(4000)

</script>
</body>
</html>

 

Alguém poderia ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Léo Motta    1

Léo Motta
Postado

Fala irmaozinho molezinha de resolver pelo menos para os navegadores mozilla, chrome e IE9.. Os IEs anteriores não suportam essa tecnologia

 

onde você quizer que fique com cantos arredondados você.. deve usar uma função do CSS3 chamada border radius, logo seu codigo ficaria assim

 

#sua div {

border-radius:3px; "isso seria para os quatro cantos, (superior direira, superior esquerda, inferior direita e inferior esquerda) caso você queira apenas um lado em especifico ficaria assim:

border-radius-top-left:3px; (isso para o canto superior esquerdo, e assim por diante)

}

 

espero ter ajudado!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito