当前频道修改之JS
以前看见别人做的频道切换,那速度之快,真是羡慕,别人告诉我,那不是用控件的,那是JS样式控制的。我 不以为然,一直让为是朋友在和我开玩笑。样式方面的知识我少之又少啊。哈哈。今天接触到了才终于相信了朋友的话。
页面梆定数据的代码:
<div id="hezuolist">
<div id="hztab">
<span><a href="#">国际合作</a></span>
<span><a href="#">国内合作</a></span>
<span><a href="#">项目招标</a></span>
</div>
<div id="hzcontent">
<asp:Repeater ID="rpt_guoji" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate>
<li><a href="new.aspx?id=<%#Eval("id") %>" title="<%#Eval("title") %>"><%#Gettitle(Eval("title"),24)%></a></li>
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="rpt_guolei" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate>
<li><a href="new.aspx?id=<%#Eval("id") %>" title="<%#Eval("title") %>"><%#Gettitle(Eval("title"),24)%></a></li>
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="rpt_zaobiao" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<FooterTemplate></ul></FooterTemplate>
<ItemTemplate>
<li><a href="new.aspx?id=<%#Eval("id") %>" title="<%#Eval("title") %>"><%#Gettitle(Eval("title"),24)%></a></li>
</ItemTemplate>
</asp:Repeater>
</div>
设置DIV样式,切换频道。其实就是一个显示与隐藏的道理。.undis {display:none}
<script type="text/javascript">
//<![CDATA[
var Tags=document.getElementById('hztab').getElementsByTagName('span');
var TagsCnt=document.getElementById('hzcontent').getElementsByTagName('ul');
var len=Tags.length;
var flag=0;//当前频道修改此处
for(i=0;i<len;i++){
Tags[i].value = i;
Tags[i].οnmοuseοver=function(){changeNav(this.value)};
TagsCnt[i].className='undis';
}
Tags[flag].className='hzover';
TagsCnt[flag].className='';
function changeNav(v){
Tags[flag].className='';
TagsCnt[flag].className='undis';
flag=v;
Tags[v].className='hzover';
TagsCnt[v].className='';
}
// ]]>
</script>
</div>
最终 实现的效果如下:
转载于:https://www.cnblogs.com/sunnysmile/archive/2009/04/22/1441486.html
- 点赞
- 收藏
- 分享
- 文章举报
- JS 动态修改 input 的 type 属性 - teresa502的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/teresa502/article/details/6546361
- JS获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS” 可以根据需求修改
- 怎么通过js,修改当前浏览器地址栏的地址,并发起这个http的url请求
- 修改当前页面加载的js的方法
- JS修改当前控件样式&为控件追加事件
- js修改zTree没有子项的节点图标为文件夹的方法
- JS计算当前年龄
- 通过JS得到当前焦点的坐标
- 如何使用JS等各种方法实现刷新当前页面
- JS获取当前使用的浏览器名字以及版本号
- js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
- 当前行高亮的两种方法(CSS、JS)
- JS 获取当前时间并格式化
- 使用Js脚本 修改控制IE的注册表相关设置(activex等)
- js与jquery中获取当前鼠标的x、y坐标位置的代码
- js获取当前时间(yyyy-MM-dd HH:mm:ss)
- js获取当前时间,并将标准日期格式转换成Long型
- js关闭当前页面/关闭当前窗口/移动端 代码
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)