日度归档：2021年2月20日

jquery如何实现隐藏和显示效果呢?


摘要:
下文jquery中实现隐藏和显示效果的示例分享，如下所示:

实现思路:
    使用jquery的hide和show方法
	即可实现jquery隐藏和显示效果

例:
jquery 实现一个隐藏和显示的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-隐藏及显示的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
 body { font-size:12px; padding:100px; }  
</style>

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("#p1").hide(1000);
    })
    $("#show").click(function(){
        $("#p1").show(1000);
    });
});
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery 隐藏和显示的示例分享
	</p>
	<hr />
       <p id="p1">待操作文本</p>
        <button id="hide">隐藏</button>
         
        <button id="show">显示</button>
         
    </body>
</html>
jquery实现元素隐藏及显示的示例分享

jquery实现元素隐藏及显示的示例分享

jquery如何实现一个Tab选项卡呢?


摘要:
下文jquery中实现Tab选项卡的示例分享，如下所示:

实现思路:
    使用jquery修改选择卡所对应元素的css样式
	即可实现Tab选项卡效果

例:
jquery 实现一个Tab选项卡的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-弹出框的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
 body { font-size:12px; padding:100px; } 
.box { float:left; padding:5px; background:#eee; position:absolute; top:20%; left:25%;
        border-radius: 20px;
} 
.box1 { width:500px; border:1px solid #4c7ebd;display:none;  border-radius: 20px; }
 
.box1 h1 { height:30px; line-height:30px; color:white; font-size:14px; background:black; padding-left:10px; }
 
.box1 span { float:right; padding-right:10px; cursor:pointer;}
 
.box1 span a { display:block; height:30px; width:30px;} 
.box1 p { padding:10px; height:300px; background:#fff; border:3px solid #eee;text-align:center; }
 
.btn { display:block;background-color: azure;width:150px;height:30px;color:black;}
</style>

<script>
 $(document).ready(function(){ 
    $('.btn').click(function(){ 
        $('.box1').show(); 
        });
          
    $('span').click(function(){ 
        $('.box1').hide(); 
        }); 
    });
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery弹出框的示例分享
	</p>
	<hr />
  <input type="button" class="btn" value="弹出框">
         
        <div class="box">
            <div class="box1">
                <h1><span><a href="#">关闭</a></span>对话框标题</h1>
                <p>对话框内容</p>
            </div>
        </div>
    </body>
</html>
jquery实现一个对话框的示例分享

jquery实现一个对话框的示例分享

jquery如何实现一个Tab选项卡呢?


摘要:
下文jquery中实现Tab选项卡的示例分享，如下所示:

实现思路:
    使用jquery修改选择卡所对应元素的css样式
	即可实现Tab选项卡效果

例:
jquery 实现一个Tab选项卡的示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>maomao365.com-Tab选项卡的示例</title> 
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script> 

 <style>
* { padding:0; margin:0;}
body { font-size:12px; padding:100px;}
ul { list-style-type:none;}
.tabContainer ul { height:30px; line-height:30px;}
.tabContainer ul li { float:left;padding:0 10px; 
                     border:1px solid #A1AFB9; border-bottom:none;
					 position:relative;
					 cursor:pointer;
					 margin-right:5px; } 
.content { width:325px; border:1px solid #A1AFB9; padding:10px; height:100px;}
* html .content { margin-top:-1px;}
.tabContainer ul li.one { background:#fff;}
</style>

<script>
$(document).ready(function(){
    $('.ct:gt(0)').hide();
    var hdw = $('.tabContainer ul li');
        hdw.hover(function(){
        $(this).addClass('two')
                .siblings().removeClass('two');
        });
 
    hdw.click(function(){
        $(this).addClass('one')
                .siblings().removeClass();
    var hdw_index = hdw .index(this);
    $('.ct').eq(hdw .index(this)).show()
            .siblings().hide();
        });
    });
</script>

    </head>
    <body>

	<p>
 maomao365.com <br />
 jquery下拉菜单的示例分享
	</p>
	<hr />
 <div class="tabContainer">
<ul>
<li class="one">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="content">
<div class="ct">我是tab1的内容</div>
<div class="ct">我是tab2的内容</div>
<div class="ct">我是tab3的内容</div>
</div>
    </body>
</html>
jquery实现一个Tab选项卡的示例分享

jquery实现一个Tab选项卡的示例分享