jquery切换效果怎么各切换各的..
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery切换效果怎么各切换各的..相关的知识，希望对你有一定的参考价值。
jquery切换效果怎么各切换各的，就是单个切换单个的，不要点一个按钮就全都隐藏了或显示了
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
$(".btn1").click(function()
$("p").toggle();
);
);
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>
通过鼠标或是键盘的事件触发后，
通过对元素的显示/隐藏
动态的修改元素的内容
动态添加新元素
主要涉及到的函数可以看看
元素隐藏 $("..").hide();
元素显示 $("...").show();
显隐切换 toggle（）
仅供参考，要学习，知道问是很好的喜欢，但是还要多实践，自己多写写，现在网上jquery的例子很多，多看，多写，jquery还是很有意思的 参考技术B $(document).ready(function()
$(".btn1").click(function()
$(this).toggle();
);
); 参考技术C script type="text/javascript">
$(document).ready(function()
$(".btn1").click(function()
$(this).next("p").toggle();
);
);
</script>本回答被提问者采纳
使用JQuery实现不同按钮的切换选中效果
实现思路：
使用JQuery的 appCss() 方法和 removeClass() 方法，通过给选中的按钮增添 新的样式 （选中效果样式），清除（或切换）未选中按钮的 ”选中效果样式“ 来达到选中效果
截图：
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>使用JQuery实现不同按钮的切换选中效果</title> 6 <script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 $(".butt").click(function(){ 10 $(".butt").removeClass("button-click"); // 清除已经选中了的按钮的样式 11 $(this).addClass("button-click"); // 重新给新选中的按钮添加选中样式 12 }) 13 }) 14 </script> 15 <style type="text/css"> 16 .box{ 17 width: 1200px; 18 height: 300px; 19 margin: auto; 20 } 21 .butt{ 22 width: 100px; 23 height: 50px; 24 border: none; 25 outline: none; 26 background-color: #5adef8; 27 } 28 .button-click{ 29 background-color: darkorchid; 30 color: #fff; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box"> 36 <button class="butt" type="button">按钮1</button> 37 <button class="butt" type="button">按钮2</button> 38 <button class="butt" type="button">按钮3</button> 39 </div> 40 </body> 41 </html>
以上是关于jquery切换效果怎么各切换各的..的主要内容，如果未能解决你的问题，请参考以下文章
JQUERY的TAB标签，我想实现5秒钟自动切换的效果，怎么做