如何在點擊時將css屬性應用於選項卡？

<div class="abcd"> 
    <article class="xyz"> 
     <a href="#"><img src="#"></a> 
     <hgroup><h1>Make it Personal</h1></hgroup> 
    </article> 
</div>

我在div中有6個以上的「article」標籤。我正在使用它們作爲選項卡。我有6頁，我在所有6頁上應用了相同的代碼。我希望它們在激活時突出顯示。點擊後，他們將轉到上面的代碼可用的6個頁面之一。我想要應用一些CSS屬性，當選項卡爲活動。如何在點擊時將css屬性應用於選項卡？

我該如何使用簡單的JavaScript來實現這個功能？

來源

2012-06-21 Pooja Desai

你嘗試先搜索呢？ – khurram

我使用jquery獲取代碼...但我想使用javascript –

jquery是javascript。 – Supr

-1

這是一些可以幫助你的代碼。

html,body { 
     margin:0; 
     padding:0; 
     color:#222; 
     background:#FFF; 
    } 
    body { 
     padding:10px; 
     font:76%/150% Arial, Helvetica, sans-serif; 
    } 
    a { 
     text-decoration: none; 
     outline: 0; /* removes dotted border around a:active from Firefox */ 
    } 
    #nav { 
     margin:0; 
     padding:0; 
     background:#708090 url(nav_bg.jpg) 0 0 repeat-x; 
     width:100%; 
     float:left; 
     border:1px solid #191970; 
     border-width:1px 1px 1px 0; 
    } 
    #nav li { 
     display:inline; 
     padding:0; 
     margin:0; 
    } 
    #nav a:link, 
    #nav a:visited { 
     color:#000; 
     background:#708090; 
     padding:20px 40px 4px 10px; 
     float:left; 
     width:auto; 
     border-right:1px solid #191970; 
     text-decoration:none; 
     font:bold 1em/1em Arial, Helvetica, sans-serif; 
     text-transform:uppercase; 
     text-shadow: 2px 2px 2px #555; 
    } 
    #nav a:hover { 
     color:#fff; 
     background:#191970; 
    } 
    #nav li:first-child a { 
     border-left:1px solid #191970; 
    } 
    #home #nav-home a, 
    #about #nav-about a, 
    #contact #nav-contact a { 
     background:#00FFFF; /* Active Page Color */ 
     color:#000; 
     text-shadow:none; 
    } 
    #home #nav-home a:hover, 
    #about #nav-about a:hover, 
    #contact #nav-contact a:hover { 
     background:#FFF; 
     color:#000; 
    } 
    #nav a:active { 
     background:#7FFF00; /*turns this color briefly when link is selected*/ 
     color:#000; 
    } 
</style> 
</head> 
<body id="about"> 
<ul id="nav"> 
    <li id="nav-home"><a href="#">Home</a></li> 
    <li id="nav-about"><a href="#">About</a></li> 
    <li id="nav-contact"><a href="#">Contact</a></li> 
</ul> 
</body> 
</html>

JsFiddle

來源

2012-06-21 11:34:42 khurram

如何在點擊時將css屬性應用於選項卡？

回答

相關問題