与jquery的css选项卡

嗨我想创建与CSS和JQuery的选项卡，但我不知道为什么我没有得到正确的内容时选择适当的选项卡。感谢乌拉圭回合时间与jquery的css选项卡

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
<head> 
<title>Follow me!</title> 
<style type="text/css"> 
    ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 32px; /*--Set height of tabs--*/ 
    border-bottom: 1px solid #999; 
    border-left: 1px solid #999; 
    width: 100%; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/ 
    line-height: 31px; /*--Vertically aligns the text within the tab--*/ 
    border: 1px solid #999; 
    border-left: none; 
    margin-bottom: -1px; /*--Pull the list item down 1px--*/ 
    overflow: hidden; 
    position: relative; 
    background: #e0e0e0; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
    font-size: 1.2em; 
    padding: 0 20px; 
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ 
    outline: none; 
} 
ul.tabs li a:hover { 
    background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ 
    background: #fff; 
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ 
} 
.tab_container { 
    border: 1px solid #999; 
    border-top: none; 
    overflow: hidden; 
    clear: both; 
    float: left; width: 100%; 
    background: #fff; 
} 
.tab_content { 
    padding: 20px; 
    font-size: 1.2em; 
} 
</style> 
<script type="text/javascript"> 
    $(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 

</head> 
<body> 

      <ul class="tabs"> 
       <li><a href="#link1" class="tab_content">Link1</a></li> 
       <li><a href="#link2" class="tab_content">Link2</a></li> 
       <li><a href="#link3" class="tab_content">Link3</a></li> 
       <li><a href="#" title="">Link4</a></li> 
       <li><a href="#" title="">Link5</a></li> 
      </ul> 
     <div class="tab_content"> 
      <div id="link1"> 
       <p>Link1</p> 
      </div> 
      <div id="link2"> 
       <p>Link2</p> 
      </div> 
      <div id="link3"> 
       <p>Link3</p> 
      </div> 
     </div> 

</body> 
</html>

来源

2010-10-20 user443946

这条线：

$(".tab_content").hide(); //Hide all content

让我觉得，你期待.tab_content引用每个内容<div>。目前它不。

我想从内容部分的父级中删除"tab_content"类，并将其放在每个单独的部分上。

<div> 
    <div class="tab_content" id="link1"> 
     <p>Link1</p> 
    </div> 
    <div class="tab_content" id="link2"> 
     <p>Link2</p> 
    </div> 
    <div class="tab_content" id="link3"> 
     <p>Link3</p> 
    </div> 
</div>

编辑：并从链接中删除tab_content类。

<ul class="tabs"> 
    <li><a href="#link1">Link1</a></li> 
    <li><a href="#link2">Link2</a></li> 
    <li><a href="#link3">Link3</a></li> 
    <li><a href="#" title="">Link4</a></li> 
    <li><a href="#" title="">Link5</a></li> 
</ul>

来源

2010-10-20 17:01:41 user113716

感谢您的答复帕特里克。我尝试过，但仍然无法正常工作。 – user443946 2010-10-20 17:05:45

@user - 抱歉，没有注意到您在链接上使用了相同的'tab_content'类。我会从这些链接中删除该类。这里有一个例子：http://jsbin.com/azelo3/2 – user113716 2010-10-20 17:19:49

谢谢帕特里克。得到它的工作。 – user443946 2010-10-20 17:31:47

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
<head> 
<title>Follow me!</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<style type="text/css"> 
    ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 32px; /*--Set height of tabs--*/ 
    border-bottom: 1px solid #999; 
    border-left: 1px solid #999; 
    width: 100%; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/ 
    line-height: 31px; /*--Vertically aligns the text within the tab--*/ 
    border: 1px solid #999; 
    border-left: none; 
    margin-bottom: -1px; /*--Pull the list item down 1px--*/ 
    overflow: hidden; 
    position: relative; 
    background: #e0e0e0; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
    font-size: 1.2em; 
    padding: 0 20px; 
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ 
    outline: none; 
} 
ul.tabs li a:hover { 
    background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ 
    background: #fff; 
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ 
} 
.tab_container { 
    border: 1px solid #999; 
    border-top: none; 
    overflow: hidden; 
    clear: both; 
    float: left; width: 100%; 
    background: #fff; 
} 
.tab_content { 
    padding: 20px; 
    font-size: 1.2em; 
} 
.tab_content div { 
    display: none; 
} 
</style> 
<script type="text/javascript"> 
    $(document).ready(function() { 

    //When page loads... 
    $("ul.tabs li:first-child a").addClass("active").show(); //Activate first tab 
    $(".tab_content #link1").css("display", "block"); //Show first tab content 

    //On Click Event 
    $("ul.tabs li a").click(function() { 

     $("ul.tabs li a").removeClass("active"); //Remove any "active" class 
     $(".tab_content div").css("display","none"); 

     $(this).addClass("active"); //Add "active" class to selected tab 


     var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 
</script> 


</head> 
<body> 

      <ul class="tabs"> 
       <li><a href="#link1" class="tab_content">Link1</a></li> 
       <li><a href="#link2" class="tab_content">Link2</a></li> 
       <li><a href="#link3" class="tab_content">Link3</a></li> 
       <li><a href="#" title="">Link4</a></li> 
       <li><a href="#" title="">Link5</a></li> 
      </ul> 
     <div class="tab_content"> 
      <div id="link1"> 
       <p>Link1</p> 
      </div> 
      <div id="link2"> 
       <p>Link2</p> 
      </div> 
      <div id="link3"> 
       <p>Link3</p> 
      </div> 
     </div> 

</body> 
</html>

来源

2010-10-20 18:51:15 Tim

与jquery的css选项卡

回答

相关问题