切换 - 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 is what you need to show or hide specific element.

.toggleClass only add or remove specific class but it will not work for adding hidden and show class at same time

Replace $(target).toggleClass('hidden show'); with $(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>