当我点击1 2 3选项卡活动类是双击不加单一类什么是Thwe Prblm？ [英] When I Click On 1 2 3 Tab Active Class Is Add On Double Click Not On Single Class What Is Thwe Prblm?

问题描述

<ul class="tabs">
        <li class="active" rel="tab1"> Call of Duty</li>
        <li rel="tab2"> Mortal Combat</li>
        <li rel="tab3"> Halo</li>
        <li rel="tab4"> Portal</li>
    </ul>

<div class="tab_container">

     <div id="tab1" class="tab_content">

         <p><img src="images/cod.jpg"> <br />
         <strong>
         Call of Duty: Black Ops bears the series' standard superbly,
         delivering an engrossing campaign and exciting competitive multiplayer.
         </strong>
         <a href="">1</a>
         </p>
            <ul class="sub-tabs">
        <li class="active" rel="sub-tab1">1</li>
        <li rel="sub-tab2">2</li>
        <li rel="sub-tab3">3</li>
        <li rel="sub-tab4">4</li>
    </ul>
     </div><!-- #tab1 -->

     <div id="sub-tab2" class="subtab_content">

       <p><h1>sub taab2</h1>
        <strong>

        Mortal Kombat returns after a lengthy hiatus and puts players
        back into the Tournament for 2D fighting with gruesome combat.
        </strong>
       </p>
       <ul class="sub-tabs">
        <li rel="sub-tab1">1</li>
        <li rel="sub-tab2">2</li>
        <li rel="sub-tab3">3</li>
        <li rel="sub-tab4">4</li>
    </ul>
</div>
<div id="sub-tab3" class="subtab_content">

       <p><h1>sub taab3</h1>
        <strong>

        Mortal Kombat returns after a lengthy hiatus and puts players
        back into the Tournament for 2D fighting with gruesome combat.
        </strong>
       </p>
       <ul class="sub-tabs">
        <li rel="sub-tab1">1</li>
        <li rel="sub-tab2">2</li>
        <li rel="sub-tab3">3</li>
        <li rel="sub-tab4">4</li>
    </ul>
</div>
     <div id="tab2" class="tab_content">

       <p><img src="images/mortal combat.jpg"> <br />
        <strong>
        Mortal Kombat returns after a lengthy hiatus and puts players
        back into the Tournament for 2D fighting with gruesome combat.
        </strong>
       </p>

     </div><!-- #tab2 -->
     <div id="tab3" class="tab_content">

       <p><img src="images/halo.jpg"> <br />
        <strong>
        Halo: Reach is the culmination of the superlative combat, sensational
        multiplayer, and seamless online integration that are the hallmarks
        of this superb series.
        </strong>
       </p>

     </div><!-- #tab3 -->
     <div id="tab4" class="tab_content">

       <p><img src="images/portal.jpg"> <br />
        <strong>
        Portal 2 is an action shooter game from Valve Software that draws
        from the original formula of innovative gameplay, story, and music,
        which earned the original Portal more than 70 industry accolades.
        </strong>
       </p>

     </div><!-- #tab4 -->

 </div> <!-- .tab_container -->
 </div>

Jquery



这个问题

Jquery

Problem in this

<script type="text/javascript">

$(document).ready(function() {

	$(".tab_content").hide();
	$(".subtab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});
	$("ul.sub-tabs li").click(function() {
		$("ul.sub-tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		$(".subtab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});
});

</script>   

css文件

css File

@charset "utf-8";
/* CSS Document */
ul.tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 32px;
        border-bottom: 1px solid #999999;
        border-left: 1px solid #999999;
        width: 100%;
    }
    ul.tabs li {
        float: left;
        margin: 0;
        cursor: pointer;
        padding: 0px 21px ;
        height: 31px;
        line-height: 31px;
        border: 1px solid #999999;
        border-left: none;
        font-weight: bold;
        background: #EEEEEE;
        overflow: hidden;
        position: relative;
    }
    ul.tabs li:hover {
        background: #CCCCCC;
    }
    ul.tabs li.active{
        background: #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
    }
    .tab_container {
        border: 1px solid #999999;
        border-top: none;
        clear: both;
        float: left;
        width: 100%;
        background: #FFFFFF;
    }
    .tab_content {
        padding: 20px;
        font-size: 1.2em;
        display: none;
    }


    ul.sub-tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 32px;
        border-bottom: 1px solid #999999;
        border-left: 1px solid #999999;
        width: 100%;
    }
    ul.sub-tabs li {
        float: left;
        margin: 0;
        cursor: pointer;
        padding: 0px 21px ;
        height: 31px;
        line-height: 31px;
        border: 1px solid #999999;
        border-left: none;
        font-weight: bold;
        background: #EEEEEE;
        overflow: hidden;
        position: relative;
    }
    ul.sub-tabs li:hover {
        background: #CCCCCC;
    }
    ul.sub-tabs li.active{
        background: #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
    }
    .subtab_container {
        border: 1px solid #999999;
        border-top: none;
        clear: both;
        float: left;
        width: 100%;
        background: #FFFFFF;
    }
    .subtab_content {
        padding: 20px;
        font-size: 1.2em;
        display: none;
    }

推荐答案

(document).ready(function() {

(document).ready(function() {

(\".tab_content\").hide();

(\".subtab_content\").hide();

这篇关于当我点击1 2 3选项卡活动类是双击不加单一类什么是Thwe Prblm？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！