如何编写jQuery或JavaScript等效的CSS [英] How to write jQuery or JavaScript equivalent for CSS
本文介绍了如何编写jQuery或JavaScript等效的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望有一个jQuery等同于CSS，当点击标签时显示它的内容。目前，我只能从CSS中获得这个。我希望在jQuery或Javascript中有相同的功能。
例如，现在点击SUN时，显示It is Sunday，点击MON时，显示这是星期一等。
如何从jQuery或Javascript获得相同的功能？
$ b
@import url（'https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700'）; * {margin：0; padding：0;} body {padding：2px;背景：＃E5E4E2;}。tabinator {background：#fff; padding：1px; font-family：Open Sans; margin-top：10px;}。tabinator input {display：none;}。tabinator label {box-sizing：border-box;显示：inline-block;填充：5px 0.6％;颜色：#ccc; margin-bottom：-1px; margin-left：-1px; font-family：courier; font-weight：bold;}。tabinator label：before {content：'';显示：块;宽度：100％; height：15px; background-color：#fff;位置：绝对;底部：-4px;左：0; z-index：10;}。tabinator label：hover {color：red; cursor：pointer;}。tabinator input：checked + label {position：relative;红色; font-weight：bold;背景：#fff; border：1px solid #bbb; border-bottom：1px solid #fff; border-radius：5px 5px 0 0; font-size：22px;}。tabinator input：checked + label：after {display：block;内容：'';位置：绝对; top：0;正确：0;底部：0;左：0; box-shadow：0 0 15px＃939393;}＃content1，＃content2，＃content3，＃content4，＃content5，＃content6，＃content7 {display：none; border-top：1px solid #bbb;填充：3px; ＃tab1：检查〜＃content1，＃tab2：检查〜＃content2，＃tab3：检查〜＃content3，＃tab4：检查〜＃content4，＃tab5：检查〜＃content5，＃tab6：检查〜＃content6，＃tab7：检查〜＃content7 {display：block; box-shadow：0 0 15px＃939393;}
< ; div class =tabinator> < input type =radioid =tab1name =tabschecked> < label for =tab1> SUN< / label> < input type =radioid =tab2name =tabs> < label for =tab2> MON< / label> < input type =radioid =tab3name =tabs> < label for =tab3> TUE< / label> < input type =radioid =tab4name =tabs> < label for =tab4> WED< / label> < input type =radioid =tab5name =tabs> < label for =tab5> THU< / label> < input type =radioid =tab6name =tabs> < label for =tab6> FRI< / label> < input type =radioid =tab7name =tabs> < label for =tab7> SAT< / label> < div id =content1> < p为H.这是星期天< /> < / DIV> < div id =content2> < p为H.这是星期一< / p> < / DIV> < div id =content3> < p为H.这是周二< / p> < / DIV> < div id =content4> < p为H.这是星期三< / p> < / DIV> < div id =content5> < p为H.这是周四< / p> < / DIV> < div id =content6> < p为H.这是星期五< / p> < / DIV> < div id =content7> < p为H.这是周六< / p> < / div>
解决方案
<这是你的合适吗？ （请参阅代码片段）
<！doctype html>< html>< ; head>< meta charset =UTF-8>< style> * {margin：0;填充：0; } body {padding：2px;背景：＃E5E4E2; } ul＃daysList {display：inline-block;宽度：100％; list-style：none;背景：#fff; padding：1px 1px 0 1px; font-family：Open Sans;保证金：10px 0 0 0; } ul＃daysList li {position：relative;盒子尺寸：边框;显示：块;向左飘浮; box-shadow：0 0 15px＃939393;宽度：70px; height：30px; text-align：center; line-height：030px;颜色：#ccc; margin-bottom：-5px; margin-left：-1px; font-family：courier; font-weight：bold; } ul＃daysList li：hover {color：red;光标：指针; } ul＃daysList li.currentDay {color：red; font-weight：bold;背景：#fff; border：1px solid #bbb; border-bottom：1px solid #fff; border-radius：5px 5px 0 0; font-size：22px; } ul＃daysList li.currentDay：after {display：block;内容：'';位置：绝对; top：0;正确：0;底部：0;左：0; box-shadow：0 0 15px＃939393; } .content {display：none; border-top：1px solid #bbb; padding：0 7px; margin-top：0;背景：#fff;宽度：100％; height：40px; line-height：38px; box-shadow：0 0 15px＃939393; } .currentContent {display：inline-block; }< /风格>< /头><身体GT; < ul id =daysList> < li data-day =content1class =currentDay> SUN< / li> < li data-day =content2> MON< / li> < li data-day =content3> TUE< / li> < li data-day =content4> WED< / li> < li data-day =content5> THU< / li> < li data-day =content6> FRI< / li> < li data-day =content7> SAT< / li> < / UL> < div id =content1class =content currentContent> < p为H.这是星期天< / p> < / DIV> < div id =content2class =content> < p为H.这是星期一< / p> < / DIV> < div id =content3class =content> < p为H.这是周二< / p> < / DIV> < div id =content4class =content> < p为H.这是星期三< / p> < / DIV> < div id =content5class =content> < p为H.这是周四< / p> < / DIV> < div id =content6class =content> < p为H.这是星期五< / p> < / DIV> < div id =content7class =content> < p为H.这是周六< / p> < / DIV> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> <脚本> $（＃daysList li）。click（function（）{var content_id =＃+ $（this）.data（day）; $（function（）{// Jquery ready。 （#DaysList li）。removeClass（currentDay）; $（this）.addClass（currentDay）; $（。content）。removeClass（currentContent）; $（content_id）.addClass（ currentContent）;}）;}）; // jquery< / script>< / body>< / html>
I would like to have an jQuery equivalent to CSS which when tab is clicked shows it content. For now, I'm able to get this from CSS only. I would like to have same function with jQuery or Javascript.
For example, now when SUN is clicked, it shows "It is Sunday" and when MON is clicked, it shows "It is Monday" and so on.
How can I have same functionality from jQuery or Javascript?
@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>
解决方案
Is that your suitable ? (see snippet)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
ul#daysList {
display: inline-block;
width: 100%;
list-style: none;
background: #fff;
padding: 1px 1px 0 1px;
font-family: Open Sans;
margin: 10px 0 0 0;
}
ul#daysList li {
position: relative;
box-sizing: border-box;
display: block;
float: left;
box-shadow: 0 0 15px #939393;
width: 70px;
height: 30px;
text-align: center;
line-height: 030px;
color: #ccc;
margin-bottom: -5px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
ul#daysList li:hover {
color: red;
cursor: pointer;
}
ul#daysList li.currentDay {
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
ul#daysList li.currentDay:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.content {
display: none;
border-top: 1px solid #bbb;
padding: 0 7px;
margin-top: 0;
background: #fff;
width: 100%;
height: 40px;
line-height: 38px;
box-shadow: 0 0 15px #939393;
}
.currentContent {
display: inline-block;
}
</style>
</head>
<body>
<ul id="daysList">
<li data-day="content1" class="currentDay">SUN</li>
<li data-day="content2">MON</li>
<li data-day="content3">TUE</li>
<li data-day="content4">WED</li>
<li data-day="content5">THU</li>
<li data-day="content6">FRI</li>
<li data-day="content7">SAT</li>
</ul>
<div id="content1" class="content currentContent">
<p> This is Sunday</p>
</div>
<div id="content2" class="content">
<p> This is Monday</p>
</div>
<div id="content3" class="content">
<p> This is Tuesday</p>
</div>
<div id="content4" class="content">
<p> This is Wednesday</p>
</div>
<div id="content5" class="content">
<p> This is Thursday</p>
</div>
<div id="content6" class="content">
<p> This is Friday</p>
</div>
<div id="content7" class="content">
<p> This is Saturday</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () { // Jquery ready. for complete page loaded
$("#daysList li").click(function () {
var
content_id = "#"+ $(this).data("day");
$("#daysList li").removeClass("currentDay");
$(this).addClass("currentDay");
$(".content").removeClass("currentContent");
$(content_id).addClass("currentContent");
});
}); // Jquery
</script>
</body>
</html>
这篇关于如何编写jQuery或JavaScript等效的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
