1. 首頁
  2. 問答
  3. 點擊後，Jquery標籤消失

點擊後，Jquery標籤消失

2015-09-22 151 views
0

點擊「我們的工作」，然後在標題1,2,3上，標籤剛剛消失，同樣的腳本用於第一個標籤（鏈接），工作正常。我做錯了什麼？點擊後，Jquery標籤消失

在Jsfiddle

$(function() { 

var tabs = $('.tabs'); 


tabs.find('a').on('click', function(e) { 
    e.preventDefault(); 
    tabs.find('.active').removeClass('active'); 
    $(this).addClass('active'); 
    $(this.hash).show().siblings().hide(); 
}).first().click(); 





//Show Menu 
$('#show-about-btn').click(function() { 
    $('#show-about-btn').html("▼"); 
    if($('.menu-nav').css('display')=='none') { 
     $('.menu-nav').slideDown("fast"); 
    } else { 
     $('.menu-nav').slideUp("fast"); 
     $('#show-about-btn').html("▲"); 
    }; 
}); 

$(".our-work").click(function() { 
    if($('.work-wrap').css('display')=='none') { 
     $(".work-wrap").slideDown("fast"); 
    } else { 
     $(".work-wrap").slideUp("fast"); 
    }; 
}); 

});

來源

2015-09-22 Viktor

回答

3

問題的完整代碼，你都躲在tab元素，其中包括subnav元素，所以你需要隱藏當前標籤的所有其他tab兄弟姐妹的所有兄弟。

$(function() { 
 

 
    var tabs = $('.tabs'); 
 

 

 
    tabs.find('a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    tabs.find('.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $(this.hash).show().siblings('.tab').hide(); 
 
    }).first().click(); 
 

 

 

 

 

 
    //Show Menu 
 
    $('#show-about-btn').click(function() { 
 
    $('#show-about-btn').html("▼"); 
 
    if ($('.menu-nav').css('display') == 'none') { 
 
     $('.menu-nav').slideDown("fast"); 
 
    } else { 
 
     $('.menu-nav').slideUp("fast"); 
 
     $('#show-about-btn').html("▲"); 
 
    }; 
 
    }); 
 

 
    $(".our-work").click(function() { 
 
    if ($('.work-wrap').css('display') == 'none') { 
 
     $(".work-wrap").slideDown("fast"); 
 
    } else { 
 
     $(".work-wrap").slideUp("fast"); 
 
    }; 
 
    }); 
 

 
});
body { 
 
    background-color: #E5E5E5; 
 
} 
 
a:link { 
 
    text-decoration: none !important; 
 
} 
 
.title { 
 
    margin-top: 150px; 
 
    font-size: 450%; 
 
    font-weight: bold; 
 
    letter-spacing: 3px; 
 
    margin-left: 10px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
.title a, 
 
.title a:visited, 
 
.title a:link { 
 
    color: black; 
 
} 
 
.title a:hover { 
 
    color: #2bb673; 
 
} 
 
#show-about-btn { 
 
    font-size: 40%; 
 
    margin-left: 10px; 
 
    color: #2bb673; 
 
} 
 
/*Navigation*/ 
 

 
.subnav { 
 
    min-height: 40px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
.subnav li { 
 
    list-style: none; 
 
    float: left; 
 
    padding: 0px 40px 1px 1px; 
 
    position: relative; 
 
    bottom: 15px; 
 
} 
 
.subnav ul li a.active { 
 
    padding: 6px; 
 
    background-color: #2bb673; 
 
    color: #fff; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    -o-border-radius: 20px; 
 
    border-radius: 20px; 
 
    text-decoration: none; 
 
} 
 
.subnav li a { 
 
    color: #2bb673; 
 
    font-weight: 600; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    right: 30px; 
 
    top: 15px; 
 
} 
 
.subnav a:hover { 
 
    color: black; 
 
    -webkit-transition: all .3s ease-in; 
 
    -moz-transition: all .3s ease-in; 
 
    -o-transition: all .3s ease-in; 
 
    transition: all .3s ease-in; 
 
} 
 
article { 
 
    font-size: 16px; 
 
    font-family: arial, sans-serif; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
.tab { 
 
    position: relative; 
 
    top: 10px; 
 
    font-size: 12px; 
 
    display: block; 
 
} 
 
.menu-nav { 
 
    display: none; 
 
} 
 
.tab p, 
 
h5 { 
 
    padding-bottom: 25px; 
 
} 
 
.tab h4 { 
 
    margin-top: 5px; 
 
    font-weight: bold; 
 
} 
 
.tab h5 { 
 
    font-size: 18px; 
 
} 
 
.tab img { 
 
    margin-left: 50px; 
 
    margin-bottom: 10px; 
 
} 
 
/*Content*/ 
 

 
.our-work a { 
 
    font-family: "Literaturnaya Italic"; 
 
    font-style: italic; 
 
    font-weight: 400; 
 
    font-size: 46px; 
 
    margin-top: 5px; 
 
    color: black; 
 
} 
 
.our-work { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
.our-work a:active { 
 
    color: #2bb673; 
 
    text-decoration: none; 
 
} 
 
.our-work a:hover { 
 
    color: #2bb673; 
 
    text-decoration: none; 
 
} 
 
.our-work a:focus { 
 
    color: #2bb673; 
 
    text-decoration: none; 
 
} 
 
.work-wrap { 
 
    display: none; 
 
} 
 
#thumbnail { 
 
    cursor: pointer; 
 
} 
 
#thumbnail:hover { 
 
    -webkit-filter: grayscale(70%); 
 
    -mozkit-filter: grayscale(70%); 
 
    filter: grayscale(70%); 
 
} 
 
.tab_2 h3 { 
 
    text-align: center; 
 
} 
 
.tab_2 { 
 
    margin-top: 20px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <header> 
 
     <h1 class="title"><a href="#">Link</a><a href="#" id="show-about-btn">&#9650;</a></h1> 
 

 
     </header> 
 
     <div class="menu-nav"> 
 
     <nav class="subnav"> 
 
      <ul class="tabs"> 
 
      <li><a href="#portfolio" class="active">Portfolio</a> 
 
      </li> 
 
      <li><a href="#about_us">About Us</a> 
 
      </li> 
 
      <li><a href="#contact_us">Contact Us</a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     <div class="sub-content"> 
 
      <article> 
 
      <div class="tab" id="portfolio"> 
 
       <div class="row"> 
 
       <div class="col-md-12"> 
 
        <h5>1.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5> 
 

 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="tab" id="about_us"> 
 
       <div class="row"> 
 
       <div class="col-md-3"> 
 
        <img src="img/about_multi.gif" alt=""> 
 
        <h4>We Are Multi-Disciplinary</h4> 
 

 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <img src="img/about_innovative.gif" alt=""> 
 
        <h4>We Are Multi-Disciplinary</h4> 
 

 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <img src="img/about_creative.gif" alt=""> 
 
        <h4>We Are Multi-Disciplinary</h4> 
 

 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <img src="img/about_serious.gif" alt=""> 
 
        <h4>We Are Multi-Disciplinary</h4> 
 

 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="tab" id="contact_us"> 
 
       <div class="row"> 
 
       <div class="col-md-4"> 
 
        <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5> 
 

 
       </div> 
 
       <div class="col-md-4"> 
 
        <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5> 
 

 
       </div> 
 
       <div class="col-md-4"> 
 
        <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5> 
 

 
       </div> 
 
       </div> 
 
      </div> 
 
      </article> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="our-work"> \t <a href="#">Our Work</a> 
 

 
    </div> 
 
    <div class="work-wrap"> 
 
     <nav class="subnav"> 
 
     <ul class="tabs"> 
 
      <li><a href="#title-1" class="active">Title 1</a> 
 
      </li> 
 
      <li><a href="#title-2">Title 2</a> 
 
      </li> 
 
      <li><a href="#title-3">Title 3</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
     <div class="tab" id="title-1"> 
 
     <article> 
 
      <div class="row"> 
 
      <div class="col-md-4"> 
 
       <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
       <h3>Title 1</h3> 
 

 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
       <h3>Title</h3> 
 

 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
       <h3>Title</h3> 
 

 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
       <h3>Title</h3> 
 

 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
       <h3>Title</h3> 
 

 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
       <h3>Title</h3> 
 

 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="tab" id="title-2"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
      <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
      <h3>Title</h3> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
      <div class="col-md-4"> 
 
      <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail"> 
 
      <h3>Title</h3> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </article> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--Container-->

來源

2015-09-22 07:56:01

+0

太棒了！我錯過了1分鐘的答案 – coolguy

+0

http://jsfiddle.net/arunpjohny/patypa68/ –

+0

@阿蘭P Johny偉大，謝謝！ – Viktor

1

更換 $(this.hash).show().siblings().hide(); 與

$('.tab').hide(); $(this.hash).show();

會做的伎倆

來源

2015-09-22 08:04:45

相關問題

 相關問題