点击隐藏左侧或右侧

脚本: 

<script language="javascript" type="text/javascript">
        function switchSysBar()
        {
  //TDTree为你要隐藏块的ID值
            if (document.all("TDTree").style.display == "")
            {
                document.all("TDTree").style.display = "none"
  //给单击部分添加图片
                document.all.movetool.innerHTML = "<img src='Images/movetoolright1.gif' width='10' height='39' border='0'>";
            }
            else
            {
                document.all("TDTree").style.display = "";
                document.all.movetool.innerHTML = "<img src='Images/movetool1.gif' width='10' height='39' border='0'>";
            }
        }
</script>


例如:
 <table width="500" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td id="TDTree">
                <uc1:TopControl ID="TopControl1" runat="server" />//这是一个树形TreeView控件
            </td>
            <td height="100%" width="10"><a style="CURSOR:hand" onClick="switchSysBar()" id="movetool"><img src="Images/movetool1.gif" width="11" height="39" border="0"></a></td>
            <td>

                <--框架-->
                <iframe marginheight="100%" marginwidth="100%" id="Main"  name="frameMain"></iframe>
            </td>
        </tr>
    </table>

可以通过监听左侧列表的点击事件来实现右侧内容的变化。具体实现步骤如下: 1. 获取左侧列表的所有项和右侧内容的所有项。 2. 给左侧列表的每个项绑定点击事件,当点击某个项时,获取该项的索引。 3. 根据索引获取右侧内容对应的项,并将其显示出来,同时隐藏其它内容项。 以下是一个示例代码: HTML代码: ``` <div class="list"> <div class="item">列表项1</div> <div class="item">列表项2</div> <div class="item">列表项3</div> </div> <div class="content"> <div class="item">内容1</div> <div class="item">内容2</div> <div class="item">内容3</div> </div> ``` JavaScript代码: ``` var listItems = document.querySelectorAll('.list .item'); var contentItems = document.querySelectorAll('.content .item'); for (var i = 0; i < listItems.length; i++) { listItems[i].addEventListener('click', function(e) { // 获取点击项的索引 var index = Array.prototype.indexOf.call(listItems, e.target); // 显示对应的内容项 for (var j = 0; j < contentItems.length; j++) { if (j === index) { contentItems[j].style.display = 'block'; } else { contentItems[j].style.display = 'none'; } } }); } ``` 上面的代码中,首先获取了左侧列表和右侧内容的所有项,并给左侧列表的每个项绑定了点击事件。当点击某个项时,获取该项在列表中的索引,然后根据索引获取右侧内容对应的项,并将其显示出来,同时隐藏其它内容项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

letisgoto

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值