使用附加导航(affix)实现内容切换

最新推荐文章于 2023-08-01 08:58:43 发布

qq_31567523

最新推荐文章于 2023-08-01 08:58:43 发布

阅读量2.2k

点赞数

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
   <style>
  a { text-decoration: none;  color: #000;  line-height: 2em; }
ul { list-style:none;  padding: 0 0 0 20px; }
.affix { float: left;  border: 1px solid #aaa;  width: 150px; }
.affix  .active  a{ color: #e4393c;  font-weight: bold; }
.container { float: left;  width: 550px;  min-height: 400px;  border: 1px solid #aaa; }
.container .box { display: none;  min-height: 300px;  }
.container .active { display: block; }

   </style>
 </head>
 <body>
  <h1>练习：查找元素&操作元素</h1>
   <h3>使用附加导航(affix)实现内容切换</h3>

   <div class="affix">
      <ul>
         <li><a data-toggle="item" href="#my-order">我的订单</a></li>
         <li class="active"><a data-toggle="item" href="#user-setting">用户设置</a></li>
         <li><a data-toggle="item" href="#account-security">账户安全</a></li>
      </ul>
   </div>

   <div class="container">
      <div id="my-order" class="box" style="background:#fee">我的订单的详细内容</div>
      <div id="user-setting" class="box active" style="background:#efe">用户设置的详细内容</div>
      <div id="account-security" class="box" style="background:#eef">账户安全的详细内容</div>
   </div>
 </body>
 <script src="js/jquery-1.11.3.js"></script>
 <script>
    $("[data-toggle='item']").click(function(event){
       event.preventDefault();
      $(this).parent().addClass('active').siblings().removeClass('active')
       $($(this).attr('href')).addClass('active').siblings().removeClass('active')
    })
 </script>
</html>

qq_31567523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用附加导航(affix)实现内容切换

html>html> head> title> new document title> meta charset="utf-8"> style> a { text-decoration: none; color: #000; line-height: 2em; }ul { list-style:none; padding: 0 0 0 20px; }.affix {
复制链接

扫一扫