js或jquery如何控制同一套html调用不同的CSS设置？
js或jquery如何控制同一套html调用不同的CSS设置？如下，ulli我做了两套不同的css设置。我想通过点击显示方式一，调用显示方式一所对应的CSS，点击显示方式...
js或jquery如何控制同一套html调用不同的CSS设置？
如下，ul li我做了两套不同的css设置。我想通过点击显示方式一，调用显示方式一所对应的CSS，
点击显示方式二，调用显示方式二所对应的CSS，
（相同的html）
例：
<html>
<div>
<a href="#">显示方式一</a>
<a href="#">显示方式二</a>
</div>
<div>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
请大家帮帮手。最好附一个代码，谢谢了。 展开
如下，ul li我做了两套不同的css设置。我想通过点击显示方式一，调用显示方式一所对应的CSS，
点击显示方式二，调用显示方式二所对应的CSS，
（相同的html）
例：
<html>
<div>
<a href="#">显示方式一</a>
<a href="#">显示方式二</a>
</div>
<div>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
请大家帮帮手。最好附一个代码，谢谢了。 展开
3个回答
展开全部
<style type="text/css">
.yangshi_1 li{
height:20px;
}
.yangshi_2 li{
height:50px;
}
</style>
<div>
<a href="#" id="class1">显示方式一</a>
<a href="#" id="class2">显示方式二</a>
</div>
<div>
<ul class="" id="list">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
<script>
$(document).ready(function (){ //jq框架 $('#class1').click(function(){//点击后添加样式1 去除样式2
$('#list').addClass('yangshi_1');
$('#list').removeClass('yangshi_2');
});
$('#class2').click(function(){//点击后添加样式2 去除样式1 $('#list').addClass('yangshi_2');
$('#list').removeClass('yangshi_1');
});
});
</script>
//jq框架 网上有的下载
.yangshi_1 li{
height:20px;
}
.yangshi_2 li{
height:50px;
}
</style>
<div>
<a href="#" id="class1">显示方式一</a>
<a href="#" id="class2">显示方式二</a>
</div>
<div>
<ul class="" id="list">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
<script>
$(document).ready(function (){ //jq框架 $('#class1').click(function(){//点击后添加样式1 去除样式2
$('#list').addClass('yangshi_1');
$('#list').removeClass('yangshi_2');
});
$('#class2').click(function(){//点击后添加样式2 去除样式1 $('#list').addClass('yangshi_2');
$('#list').removeClass('yangshi_1');
});
});
</script>
//jq框架 网上有的下载
追问
请问jQ框架是要用哪一种的？麻烦附一个地址，谢谢，
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
.red{
color:#F00;
}
.green{
color:#0F0;
}
</style>
<script type="text/javascript">
function myfunction(id)
{
if(id=="a"){
document.getElementById("ul_css").className="red";
} else{
document.getElementById("ul_css").className="green";
}
}
</script>
<body>
<div>
<a href="#" onclick="myfunction('a');">显示方式一</a>
<a href="#" onclick="myfunction('b');">显示方式二</a>
</div>
<div>
<ul id="ul_css" class="red">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
</body>
.red{
color:#F00;
}
.green{
color:#0F0;
}
</style>
<script type="text/javascript">
function myfunction(id)
{
if(id=="a"){
document.getElementById("ul_css").className="red";
} else{
document.getElementById("ul_css").className="green";
}
}
</script>
<body>
<div>
<a href="#" onclick="myfunction('a');">显示方式一</a>
<a href="#" onclick="myfunction('b');">显示方式二</a>
</div>
<div>
<ul id="ul_css" class="red">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你方式一 和方式 二 执行不同的 脚本样式 就可以了
更多追问追答
追问
我还是一个刚入门的，对JS及jquery调用还不太熟悉。请问能不能附一个代码？
追答
号了 js和 jquery 是一个父亲
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
