如何div的內容onclick選項卡

我有選項卡，我有一些div，當我點擊標籤的特殊div應該顯示。如何div的內容onclick選項卡

但是當我點擊標籤，多個div在同一時間顯示。如何只顯示一個div當我點擊一個選項卡？

這裏是我的代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="css/style.css" type="text/css"> 
    </head> 
    <body> 
     <div id="ie-test"> 

      <ul class="group" id="boxLinks"> 
       <li><a href="#box1">Description</a></li> 
       <li><a href="#box2">Audience</a></li> 
       <li><a href="#box3">Objectives</a></li> 
       <li><a href="#box4">Prerequisites</a></li> 
       <li><a href="#box5">Duration</a></li> 
      </ul> 
      <div id="box"> 
       <br> 
       <div class="box" id="box1">1</div> 
       <div class="box" id="box2">Another box!</div> 
       <div class="box" id="box3">Woot!</div> 
       <div class="box" id="box4">Another box!</div> 
       <div class="box" id="box5">Anotheasfr box!</div> 
       <br> 
      </div> 
     </div> 
    </body> 
</html>

CSS

#ie-test { 
    position: relative; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
#boxLinks { 
    list-style: none outside none; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 
#boxLinks li { 
    display: inline; 
} 
#boxLinks li a { 
    border: 1px solid #CCCCCC; 
    color: black; 
    display: block; 
    float: left; 
    left: 1px; 
    margin-left: -1px; 
    padding: 5px 10px; 
    position: relative; 
    text-decoration: none; 
} 
#boxLinks li a:hover { 
    background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
} 
#box { 
    border: 1px solid #CCCCCC; 
    height: 522px; 
    overflow: hidden; 
    padding: 0 30px; 
    position: relative; 
    top: -1px; 
    width: 90%; 
} 
.box { 
    display: block; 
    height: 250px; 
    position: relative; 
} 
#box1:target, #box2:target, #box3:target { 
    display: block; 
    height:auto; 
}

來源

2014-01-23 Mithun Raikar

試試jquery選項卡http://jqueryui.com/tabs/ –

@KarthickKumarGanesh謝謝。 –

您可以使用jqueryui tab：它使用方便，美觀大方。

來源

2014-01-23 05:53:10

非常感謝我的工作.... –

嘗試jquery標籤或者如果你只想在CSS中使用這一個。

.box { 
    display: none; 
    height: 250px; 
    position: relative; 
} 
#box1:target, #box2:target, #box3:target, #box4:target, #box4:target { 
    display: block; 
    height:auto; 
}

來源

2014-01-23 05:55:58 radha

結帳以下JSFIDDLE：

$('ul.group > li > a').click(function(event){ 
    $('div.box').each(function(){$(this).css('display', 'none');}); 
    $('div'+$(this).attr('href')).css('display', 'block'); 
}); 
$('ul.group > li > a[href=#box1]').click();

來源

2014-01-23 06:08:38 Airan

您可以使用jQuery。下面的是使用jquery的工作代碼。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#ie-test { 
    position: relative; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
#boxLinks { 
    list-style: none outside none; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 
#boxLinks li { 
    display: inline; 
} 
#boxLinks li a { 
    border: 1px solid #CCCCCC; 
    color: black; 
    display: block; 
    float: left; 
    left: 1px; 
    margin-left: -1px; 
    padding: 5px 10px; 
    position: relative; 
    text-decoration: none; 
} 
#boxLinks li a:hover { 
    background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
} 
#box { 
    border: 1px solid #CCCCCC; 
    height: 522px; 
    overflow: hidden; 
    padding: 0 30px; 
    position: relative; 
    top: -1px; 
    width: 90%; 
} 
.box { 
    display: block; 
    height: 250px; 
    position: relative; 
} 
#box1:target { 

    display: block; 
    height:auto; 
background-color:red; 
} 
#box2:target { 

    display: block; 
    height:auto; 
background-color:red; 
} 
#box3:target { 

    display: block; 
    height:auto; 
background-color:red; 
} 
#box4:target { 

    display: block; 
    height:auto; 
background-color:red; 
} 
#box5:target { 

    display: block; 
    height:auto; 
background-color:red; 
} 
</style> 
<script type="text/javascript" src="jquery-2.0.3.min.js" ></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".box").each(function() 
{ 
$(this).css("display","none"); 
}); 

}); 
function Show(boxName) 
{ 
$('.box').css("display","none"); 
$('#'+boxName).css("display","block"); 
} 
</script> 
</head> 
<body> 
<div id="ie-test"> 

       <ul class="group" id="boxLinks"> 
        <li><a href="javascript:Show('box1')">Description</a></li> 
        <li><a href="javascript:Show('box2');">Audience</a></li> 
        <li><a href="javascript:Show('box3');">Objectives</a></li> 
        <li><a href="javascript:Show('box4');">Prerequisites</a></li> 
        <li><a href="javascript:Show('box5');">Duration</a></li> 
       </ul> 
       <div id="box"> 
        <br> 
        <div class="box" id="box1">1</div> 
        <div class="box" id="box2">Another box!</div> 
        <div class="box" id="box3">Woot!</div> 
        <div class="box" id="box4">Another box!</div> 
        <div class="box" id="box5">Anotheasfr box!</div> 
        <br> 
       </div> 

      </div> 
</body> 
</html>

來源

2014-01-23 10:13:44

如何div的內容onclick選項卡

回答

相關問題