JS做的左侧导航栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="../styles/global.css" type="text/css" rel="stylesheet"/>
    <link href="../styles/admin.css" type="text/css" rel="stylesheet"/>
    <style>
        a.herf_style1:link {color: #ff0000; text-decoration: none}
        a.herf_style1:visited {color: #0000ff; text-decoration: none}
        a.herf_style1:hover {text-decoration: underline}
    </style>
    <script type="text/javascript">
  function SwitchMenu(obj)
  {
   if (document.getElementById)
   {
    var el = document.getElementById(obj);
    var ar = document.getElementById("serach_bar").getElementsByTagName("span");
    if (el.style.display != "block")
    {
     for (var i = 0; i < ar.length; i++)
     {
      if (ar[i].className == "serach_bar_submenu")
       ar[i].style.display = "none";
     }
     el.style.display = "block";
    }
    else
    {
     el.style.display = "none";
    }
   }
  }
 </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="serach_bar" class="left">
        <div class="serach_bar_menu" οnclick="SwitchMenu('sub1')">广告管理</div>
  <span class="serach_bar_submenu" id="sub1">
   <a class="herf_style1" href="addAdvertise.aspx" target="frame">发布广告</a><br/>           
   <a class="herf_style1" href="AdPosition.aspx" target="frame">广告定位</a><br/>
   <a class="herf_style1" href="AreaAd.aspx" target="frame">广告位置维护</a><br>           
  </span>
  <div class="serach_bar_menu" οnclick="SwitchMenu('sub2')">广告位管理</div>
  <span class="serach_bar_submenu" id="sub2">
   <a class="herf_style1" href="AddArea.aspx" target="frame">添加区位</a><br/>           
   <a class="herf_style1" href="AreaManager.aspx" target="frame">区位管理</a><br/>
  </span>
    </div>
    <div>
     <iframe id=Main name=frame src=AreaAd.aspx frameborder=0 
       marginwidth=0 marginheight=0  οnclick="return Main_onclick()" style="width: 1024px; height:768px;">
     </iframe>
 </div>
    </form>
</body>
</html>

你可以使用HTML和CSS创建一个左侧导航栏和右侧的内容区域。具体实现方法如下: 1. 创建HTML结构,包括左侧导航栏和右侧内容区域。左侧导航栏可以使用<ul>和<li>标签创建,右侧内容区域可以使用<div>标签创建。 2. 使用CSS设置左侧导航栏和右侧内容区域的样式。可以使用float或者flex布局实现左右两栏的排列。 3. 使用JavaScript或jQuery实现导航栏的交互效果。例如,点击导航栏中的某个选项,可以在右侧内容区域显示对应的内容。 下面是一个简单的示例代码,供参考: HTML代码: ```html <div class="container"> <ul class="nav"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> <div class="content"> <section id="section1"> <h2>Section 1</h2> <p>Content of section 1 goes here.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>Content of section 2 goes here.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>Content of section 3 goes here.</p> </section> </div> </div> ``` CSS代码: ```css .container { display: flex; } .nav { width: 20%; background-color: #f1f1f1; padding: 20px; } .nav li { margin-bottom: 10px; } .nav a { display: block; padding: 10px; background-color: #ddd; color: #333; text-decoration: none; } .content { width: 80%; padding: 20px; } section { margin-bottom: 40px; } h2 { margin-top: 0; } ``` JavaScript代码: ```javascript $(document).ready(function() { $('.nav a').click(function(e) { e.preventDefault(); var sectionId = $(this).attr('href'); $('.content section').hide(); $(sectionId).show(); }); }); ``` 在这个示例中,我们使用了flex布局将左侧导航栏和右侧内容区域排列在一起。点击导航栏中的选项时,我们使用jQuery选择器找到对应的内容区域,并显示出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值