javascript - toggle - Jquery 我想每当点击它显示的第一个按钮然后点击第二个按钮然后而不是第一个按钮的 div 标签隐藏

Question

See Here i create my css file for show paragraph

          <div><a href="#about" class="toggle">About</a></div>
          <div><a href="#photos" class="toggle">Photos</a></div>
          <div><a href="#rates" class="toggle">Rates and Reviews</a></div>
        </div>
        <!-- middel -->
        <div class="col-lg-6" align="center" style="background-color:#CFF">
          <div id="about" >about </div>
          <div id="photos" >photos</div>
          <div id="rates" >Rates and Reviews</div>
        </div>

see here, describe jquery code. please help in implements

 <script type="text/javascript">
$(function () {

$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $(target).toggleClass('hidden show');
});

});

Answer 1

toggle()功能是您需要显示或隐藏特定元素的功能。

.toggleClass只能添加或删除特定类，但不能同时添加hidden 和show 类

将 $(target).toggleClass('hidden show'); 替换为 $(target).toggle();

$(function () {

$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $('#mainDiv').find('a').removeClass("active");
    $(this).addClass('active');
    $("#detailsDiv").children().hide(); 
    $(target).toggle();
  });
});

.active{
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv"><div><a href="#about" class="toggle">About</a></div>
          <div><a href="#photos" class="toggle">Photos</a></div>
          <div><a href="#rates" class="toggle">Rates and Reviews</a></div>
        </div>
        <!-- middel -->
        <div class="col-lg-6" id="detailsDiv" align="center" style="background-color:#CFF">
          <div id="about" >about </div>
          <div id="photos" style="display: none;">photos</div>
          <div id="rates" style="display: none;">Rates and Reviews</div>
        </div>