DIsplaying内容点击同一页面内的锚标记

我有一个手风琴，它里面有一些李。在点击特定的李锚标记该div的内容应显示在旁边。我用手风琴和col-9的bootstrap col-3来显示div。所有的div都显示出来，但我只需要显示点击的li的div。任何人都可以帮忙吗？DIsplaying内容点击同一页面内的锚标记

$(function() { 
 
    $("#profileAccordion").accordion({ 
 
    autoHeight: true 
 
    }); 
 
    $("#profileAccordion").accordion({ 
 
    collapsible: true 
 
    }); 
 
});

#personalInformation, 
 
#changePassword, 
 
#loginHistory, 
 
#addUser { 
 
    //display: none; 
 
} 
 

 
#personalInformation:focus { 
 
    display: block; 
 
    color: Red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-3"> 
 
    <div id="profileAccordion"> 
 
     <h3>My Profile <i class="fa fa-angle-down pull-right " aria-hidden="true "></i></h3> 
 

 
     <ol> 
 
     <li><a href="#personalInformation">Personal Information</a></li> 
 
     <li><a href="#changePassword">Change My Password</a></li> 
 
     <li><a href="#loginHistory">Login History</a></li> 
 
     <li><a href="#addUser">Add User</a></li> 
 
     </ol> 
 

 
     <h3>Everest Settings <i class="fa fa-angle-down pull-right " aria-hidden="true "></i></h3> 
 

 
     <div> 
 
     <ol> 
 
      <li>My Dashboard</li> 
 
      <li>Language & Time Zone</li> 
 
     </ol> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-9" style="border-left: 1px solid #ccc;"> 
 
    <div id="personalInformation"> 
 
     <div class="row form-group"> 
 
     <div class="col-sm-10"> 
 
      <h4>Personal Information</h4> 
 
     </div> 
 
     <div class="col-sm-2 marbot5 pull-right"> 
 
      <a class="text-link " ui-sref=" " href="# ">Edit</a> 
 
     </div> 
 
     </div> 
 
     <hr> 
 
     <div class="row "> 
 
     <div class="col-sm-12"> 
 

 
      hello USer 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="personalInformation"> 
 
     <div class="row form-group" id="personalInformation"> 
 
     <div class="col-sm-10"> 
 
      <h4>Add User</h4> 
 
     </div> 
 
     </div> 
 
     <hr> 
 
     <div class="row "> 
 
     <div class="col-sm-12"> 
 

 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">Name<span class="mandatory">*</span></label> 
 
      <div class="col-sm-5"> <input class="form-control" placeholder="" /></div> 
 
      </div> 
 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">Company</label> 
 
      <div class="col-sm-5"> <input class="form-control" placeholder="" /></div> 
 
      </div> 
 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">Title</label> 
 
      <div class="col-sm-5"> <input class="form-control" placeholder="" /></div> 
 
      </div> 
 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">E-mail<span class="mandatory">*</span></label> 
 
      <div class="col-sm-5"> <input class="form-control" placeholder="" /></div> 
 
      </div> 
 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">Work</label> 
 
      <div class="col-sm-5"> <input class="form-control" value="+1" type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phone" placeholder="" required></div> 
 
      </div> 
 

 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">Mobile</label> 
 
      <div class="col-sm-5"> <input class="form-control" value="+1" type="tel" international-phone-number auto-hide-dial-code="false" class="phone" name="phoneCountryCode" ng-model="phone" required></div> 
 
      </div> 
 

 
      <div class="row form-group"> 
 
      <label class="col-sm-3 control-label" for="firstname">User Level<span class="mandatory">*</span></label> 
 
      <div class="col-sm-5"> 
 
       <select class="form-control placeholder-color "> 
 
          <option value=" " disabled selected>--Select User Level--</option>  
 
          <option value=" ">Super Admin</option> 
 
          <option value=" ">Executive</option> 
 
          <option value=" ">Manager</option> 
 
          <option value=" ">Team Member</option> 
 
         </select> 
 
       <i class="fa fa-angle-down pull-right " aria-hidden="true "></i></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="changePassword"> 
 
     <div class="row form-group"> 
 
     <div class="col-sm-10"> 
 
      <h4>Change Password</h4> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="row"> 
 

 
     <div class="col-sm-10"> 
 

 
      <div class="row"> 
 
      <div class="col-sm-6 col-md-offset-3"> 
 
       <form class="form-horizontal"> 
 
       <div class="form-group"> 
 
        <label for="" class="col-sm-4 control-label">Current Password</label> 
 
        <div class="col-sm-8"><input type="text" class="form-control" id="lastname" placeholder=""></div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="" class="col-sm-4 control-label">New Password</label> 
 
        <div class="col-sm-8"><input type="text" class="form-control" id="lastname" placeholder=""></div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="" class="col-sm-4 control-label">Confirm Password</label> 
 
        <div class="col-sm-8"><input type="text" class="form-control" id="lastname" placeholder=""></div> 
 
       </div> 
 

 

 
       </form> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
     <div class="row form-footer"> 
 
     <div class="col-md-5 col-md-offset-1"><a href="#" class="btn text-link pull-left">Cancel</a></div> 
 
     <div class="col-md-5"><button type="button" class="btn btn-primary pull-right" ng-click="newpasswordsubmitted()">Save &amp; Update</button></div> 
 
     </div> 
 
     <div class="col-md-12 text-right"> 
 
     <a class="btn btn-default" href="# ">Cancel</a> <a class="btn btn-primary" href="# ">Save</a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

来源

2017-07-27 Hema Nandagopal

为什么你包含两个版本的jQuery库？ – Sam

好的，我错误地添加了片段的jquery选项。 –

*«我无法在点击时显示内容»*不清楚。更具体地说明点击哪个元素时要显示的内容。您的代码似乎正常运行。 –

我添加了一个名为 'MYLIST' 您OL ID和这样做;

$("#mylist > li > a").click(function() { 
    var href = $(this).attr('href'); 
    $(href).fadeToggle(); 
    });

看到它在这里的行动;

https://jsfiddle.net/hbox25h8/1/

您可能需要一点点的改进考虑到用户行为。

来源

2017-07-27 12:55:03 Sam

我们不能只用css来达到这个目的吗？与jQuery我已经做到了，但使用CSS我们不能实现？ –

你真的应该在你的问题中说过这个。不，你不能只使用CSS，但你可以使用纯JavaScript。就个人而言，我会坚持使用jQuery。 – Sam

我不需要切换，我只需要显示相应的div。 –

DIsplaying内容点击同一页面内的锚标记

回答

相关问题