概述:

  先上我的布局图:

  ul中的每一个li里面包含着一个'a'超链接,可以猜想到,我想没点击ul->li里面每个a,链接到不同的页面,在这里,我用iframe完成.

html主要代码为:

 <div class="warp">
<div class="title">
<ul id="fengcai_title">
<li><a href="#">教师的风采1</a></li>
<li><a href="#">教师的风采2</a></li>
<li><a href="#">教师的风采3</a></li>
</ul>
</div>
<div class="content">
<iframe scrolling="auto" target="_parent" id="content_frame" src="content/tar.html"> </iframe>
</div>

  然后下载相关的jquery库,完整的jquery代码为:

<script type="text/javascript" src="jq/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jq/jquery-2.1.0-vsdoc.js"></script>
<script type="text/javascript" src="jq/jQuery2.1.js"></script>
<script type="text/javascript" >
function dd() {
$("#fengcai_title li a").click(function(){
$("#content_frame").attr('src', 'content/' + this.innerHTML + ".html");
});
}
</script>

  其中,页面文件统一放在'content'目录中,页面的文件名和 a中的文字相对应.可以在 body的onload事件中调用该dd()函数.

jquery-动态设置ul li a链接目标的更多相关文章

  1. jQuery动态设置样式List item

    前段时间,Insus.NET有修改一个功能<激活当前视图菜单高亮呈现>http://www.cnblogs.com/insus/p/5287093.html 今天Insus.NET想改用另 ...

  2. 利用jQuery动态设置单选框的选中

    一.需要实现的效果 这里使用jQuery来实现.需要实现的效果如下:当下拉条改变时,单选框选中的值随之变化. <!DOCTYPE html> <html> <head&g ...

  3. jQuery动态设置样式(style、css)

    一.jQuery设置css样式 <div style="background-color:#ffffff;padding-left:10px;">测试jQuery动态获 ...

  4. Jquery动态设置下拉框selected --(2018 08/12-08/26周总结)

    1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: &l ...

  5. 动态获取ul,li的数据

    通过一个小例子讲下动态获取li标签的数据,前台页面原有样式: <div class="flone"> <ul class="fltwo"> ...

  6. jquery中对于ul>li列表分页。学习记录

    这个是很简单的一种分页,只能对列表进行分页.为了开发有可能需要用到记录下来 Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  8. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  9. 【前端_js】jQuery动态设置元素的样式

    1.用css()方法查询元素的某个样式 $("div").css("padding-left")); 2.用css()方法设置元素的样式 法一: $(" ...

随机推荐

  1. Match & Catch

    Codeforces Round #244 (Div. 2) D:http://codeforces.com/contest/427/problem/D 题意:给你两个串,让你找一个最小的串,并且这个 ...

  2. Hibernate 注解 字段不映射的注解

    在字段前面加这个注解:@Transient

  3. 【BZOJ2434-[Noi2011]】阿狸的打字机(AC自动机(fail树)+离线+树状数组)

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...

  4. 【UVALive - 5131】Chips Challenge(上下界循环费用流)

    Description A prominent microprocessor company has enlisted your help to lay out some interchangeabl ...

  5. 使用maven profile实现多环境可移植构建

    mvn clean package -Pproduction即构建出生产环境需要的war包 mvn tomcat:redeploy -Ptest 即发布到测试环境 在开发过程中,我们的软件会面对不同的 ...

  6. iis7 发布mvc3 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容及Login on failed for "IIS APPPOOL\ASP.NET v4.0"问题

    问题1: 发布mvc3报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容 折腾了半天,提示里面的解决方法是: 如果不希望启用目录浏览,请确保配置了默认文档并且该文件存在. ...

  7. 怎么打开Windows Server 2008 图片预览的功能?

    打开一个文件夹,点击菜单中的“工具”->“文件夹选项”,切换到“查看”选项卡,在高级设置中取消如下选项: “始终显示图标,从不显示缩略图” “在缩略图上显示文件图标”

  8. maya绝招(21--40)

    第21招 将Outliner分成两个 在该视图中如果元素很多的时候,会觉得Outliner不够用,这个时候拖动下侧的底框,就可以分成两栏,这样选择就省事多了. 第22招 运用选择区域,快速选择物体 在 ...

  9. 安装MongoDB -- Windows平台

    1. 安装MongoDB 2. 添加环境变量 将安装后的bin目录,添加至系统的Path环境变量中,例如我的安装路径为"C:\Program Files\MongoDB\Server\3.2 ...

  10. PHP小题目 求 1*3+5*7+…+97*99的值

    下面是另外两种比较基础的方法实现的代码