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

Question

请参阅此处我为显示段落创建了我的 css 文件

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

看这里，描述jquery代码。 请帮助实施

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