2、点击浏览器右上角的三点，在d出来的方框里找到“设置”选项并点击。
3、然后在d出来的页面中可见目的浏览器绑定的页面链接，我们点击链接后面的“×”号，把该链接删掉。
4、然后在输入框里输入我们想要修改的主页网址，再点击右侧的保存图标。
5、然后关闭浏览器，重新打开，就可以看见d出来的主页已经变成我们想要的主页啦。
html 选项卡切换内容方法：
工具/原料
网页编辑器dreamweaver
javascript中的getElementById和getElementsByTagName方法
*** 作步骤：
1、三个DIV形成的版块只会显示第三个汽车的内容。
二、制作过程
1、 制作HTML结构框架
2、完成对应CSS的输入，使页面形成特定布局
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
button {
width:120px
height: 32px
line-height: 32px
background-color: #ccc
font-size: 24px
}
div {
display: none
width:200px
height: 200px
font-size: 72px
color:#ddd
background-color: green
border:1px solid black
}
</style>
</head>
<body>
<button style="background-color: yellow">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
var buttonArr = document.getElementsByTagName("button")
var divArr = document.getElementsByTagName("div")
for(var i = 0 i < buttonArr.lengthi++) {
buttonArr[i].index = i
// buttonArr[i].setAttribute("index",i)
buttonArr[i].onclick = function() {
for(var j = 0 j < buttonArr.length j++) {
buttonArr[j].style.backgroundColor = "#ccc"
buttonArr[this.index].style.backgroundColor = "yellow"
divArr[j].style.display = "none"
divArr[this.index].style.display = "block"
}
}
}
</script>
</body>
</html>
3、输写javascript代码，对选项卡标头分别注册相应的事件
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0 margin:0}
button {
background-color: #ccc
width:80px
height: 30px
}
.btn-active {
background-color: yellow
font-weight:bold
font-size: 14px
}
div{
width:200px
height: 200px
font-size: 64px
background-color: #0c0
display: none
color:#fff
}
.div-active {
display: block
}
</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button")
var divList = document.getElementsByTagName("div")
//2.添加事件
for(var i = 0 i < buttonList.length i++) {
buttonList[i].index = i
buttonList[i].onclick = function() {
for(var j = 0 j < buttonList.lengthj++) {
buttonList[j].className = ""
divList[j].className = ""
}
this.className = "btn-active"
divList[this.index].className = "div-active"
}
}
</script>
</body>
</html>
4、完整代码：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8">
<title> 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{padding:0px margin:0px}
a{ text-decoration:none color:black}
a:hover{text-decoration:none color:#336699}
#tab{width:270px padding:5pxheight:150pxmargin:20px}
#tab ul{list-style:none display:height:30pxline-height:30px border-bottom:2px #C88 solid}
#tab ul li{background:#FFFcursor:pointerfloat:leftlist-style:none height:29px line-height:29pxpadding:0px 10px margin:0px 10px border:1px solid #BBB border-bottom:2px solid #C88}
#tab ul li.on{border-top:2px solid Saddlebrown border-bottom:2px solid #FFF}
#tab div{height:100pxwidth:250px line-height:24pxborder-top:none padding:1px border:1px solid #336699padding:10px}
.hide{display:none}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function(){
var myTab = document.getElementById("tab") //整个div
var myUl = myTab.getElementsByTagName("ul")[0]//一个节点
var myLi = myUl.getElementsByTagName("li") //数组
var myDiv = myTab.getElementsByTagName("div") //数组
for(var i = 0 i<myLi.lengthi++){
myLi[i].index = i
myLi[i].onclick = function(){
for(var j = 0 j < myLi.length j++){
myLi[j].className="off"
myDiv[j].className = "hide"
}
this.className = "on"
myDiv[this.index].className = "show"
}
}
}
</script></head><body><!-- HTML页面布局 --><div id = "tab">
<ul>
<li class="off">房产</li>
<li class="on">家居</li>
<li class="off">二手房</li>
</ul>
<div id="firstPage" class="hide">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab/a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="secondPage" class="show">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="thirdPage" class = "hide">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div></div></body></html>
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：第一步：在连接样式表的元素里定义一个id,例如
复制代码
代码如下:
<link
href=”1.css”
rel=”stylesheet”
type=”text/css”
id=”css”>
我定义的id是css。
第二步：写一个js函数，代码如下：
复制代码
代码如下:
<script
type=”text/javascript”>
function
change(a){
var
css=document.getElementById(“css”)
if
(a==1)
css.setAttribute(“href”,”1.css”)
if
(a==2)
css.setAttribute(“href”,”2.css”)
}
</script>
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
复制代码
代码如下:
<a
href=”#”
onClick=”change(1)”>1.css</a>
<a
href=”#”
onClick=”change(2)”>2.css</a>
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
方法二：
第一步：导入两套css文件
复制代码
代码如下:
<link
rel="stylesheet"
type="text/css"
title="样式A"
href="css/people1.css"
/>
<link
rel="alternate
stylesheet"
type="text/css"
title="样式B"
href="css/people2.css"
/>
第二步：写切换的js函数
复制代码
代码如下:
<script
type="text/javascript">
var
title
=
"样式A"
function
setStyle(){
//只是样式A
和样式B切换
if(title=="样式A"){
title
=
"样式B"
}else{
title
=
"样式A"
}
var
i,links
//用dom方法获取所有link元素
links
=
document.getElementsByTagName("link")
//判断每个link元素中是否含有style字符串
，用来判断此link元素为样式表link
，同时判断此link是否包含title属性
for(i=0
links[i]
i++){
if(links[i].getAttribute("rel").indexOf("style")
!=
-1
&&
links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled
=
true
//再来判断title中是否有指定的title字符串
有则把当前的link设为可视
即激活当前的link
if(links[i].getAttribute("title").indexOf(title)
!=
-1){
links[i].disabled
=
false
//alert("ok")
}
}
}
}
</script>
第三步：在html标签中调用切换的js函数
复制代码
代码如下:
<a
href="#"
onclick="setStyle()"
>1</a>
<a
href="#"
onclick="setStyle()">2</a>
<a
href="#"
onclick="setStyle()">3</a>
<a
href="#"
onclick="setStyle()">4</a>
<a
href="#"
onclick="setStyle()">5</a>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）