javascript - 切换 - 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() function 是您需要显示或隐藏特定元素的函数。

.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>