Question

请参阅此处，我为show paragraph
创建了我的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>

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

1 个答案: