jquery 포커스가 사라지고 숨겨집니다.
- PHPz원래의
- 2023-05-14 11:08:37501검색
웹 디자인에서는 초점이 사라지고 숨겨지는 현상이 흔한 현상입니다. jQuery를 사용하여 코드를 작성하면 이 효과를 쉽게 얻을 수 있습니다. 이 기사에서는 jQuery를 사용하여 포커스가 사라지는 효과를 얻는 방법을 소개하고 몇 가지 샘플 코드를 제공합니다.
초점이 사라지고 숨겨지는 현상은 무엇인가요?
웹 디자인에서는 포커스가 사라지고 숨기는 현상이 흔히 발생합니다. 입력 상자나 탭과 같은 대화형 컨트롤에서 정보를 입력하거나 옵션을 선택하면 일반적으로 일부 프롬프트나 작업 메뉴가 나타납니다. 컨트롤을 떠나 다른 위치로 포커스를 이동하면 이러한 프롬프트나 작업 메뉴가 자동으로 사라집니다. 이 효과의 목적은 페이지의 시각적 선명도와 아름다움을 향상시키는 것입니다.
jQuery를 사용하여 포커스가 사라지고 숨기는 방법은 무엇입니까?
포커스가 사라지고 숨는 효과를 얻으려면 jQuery를 사용하여 코드를 작성할 수 있습니다. 다음은 이 효과를 얻기 위한 샘플 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery 焦点消失隐藏示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#inputBox").focus(function(){
$("#tipBox").removeClass("hidden");
}).blur(function(){
$("#tipBox").addClass("hidden");
});
});
</script>
</body>
</html>위 코드는 입력 상자와 프롬프트 상자의 예를 보여줍니다. 사용자가 입력 상자에 정보를 입력하면 프롬프트 상자에 해당 정보가 표시됩니다. 사용자가 입력 상자를 떠나면 프롬프트 상자가 자동으로 사라집니다.
코드에서는 jQuery의 focus 및 Blur 메서드를 사용합니다. 입력 상자가 포커스를 받으면 RemoveClass 메서드를 사용하여 프롬프트 상자의 숨겨진 클래스를 삭제하여 페이지에 표시합니다. 사용자가 입력 상자를 떠나면 addClass 메서드를 사용하여 숨겨진 클래스를 추가하여 프롬프트 상자가 자동으로 숨겨집니다.
또한 숨겨진 클래스를 정의하고 display: none 속성을 사용하여 프롬프트 상자가 처음에 숨겨지도록 설정합니다. 이런 방식으로 사용자가 처음으로 페이지에 들어갈 때 프롬프트 상자는 기본적으로 숨겨집니다.
기타 샘플 코드
위 샘플 코드 외에도 참고용으로 포커스 사라지고 숨기기 샘플 코드도 제공됩니다.
탭 프롬프트
<!DOCTYPE html>
<html>
<head>
<title>选项卡提示</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.tip {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
padding: 5px;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="tab active">选项卡1</li>
<li class="tab">选项卡2</li>
<li class="tab">选项卡3</li>
</ul>
<div class="tip active">选项卡1的提示信息</div>
<div class="tip">选项卡2的提示信息</div>
<div class="tip">选项卡3的提示信息</div>
<script>
$(document).ready(function(){
$(".tab").mouseover(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("hidden").addClass("active");
}).mouseout(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("active").addClass("hidden");
});
});
</script>
</body>
</html>위 코드는 탭 프롬프트의 예를 보여줍니다. 사용자가 탭 위로 마우스를 가져가면 해당 도구 설명이 페이지에 나타납니다. 사용자가 탭 밖으로 마우스를 이동하면 프롬프트 상자가 자동으로 사라집니다.
코드에서는 jQuery의 mouseover 및 mouseout 메소드를 사용합니다. 우리는 툴팁의 숨겨진 클래스를 제거하고 마우스가 탭 위에 있을 때 페이지에 표시되도록 활성 클래스를 추가하기 위해 RemoveClass 메소드를 사용합니다. 마우스가 탭 밖으로 이동할 때, RemoveClass 메소드를 사용하여 활성 클래스를 삭제하고 숨겨진 클래스를 추가하여 프롬프트 상자를 자동으로 숨깁니다.
입력 상자와 버튼
<!DOCTYPE html>
<html>
<head>
<title>输入框和按钮示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<button id="btn">提交</button>
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var inputValue = $("#inputBox").val();
if(inputValue === ""){
$("#tipBox").removeClass("hidden");
}else{
$("#tipBox").addClass("hidden");
}
});
});
</script>
</body>
</html>위 코드는 입력 상자와 버튼의 예를 보여줍니다. 사용자가 제출 버튼을 클릭하면 입력 상자가 비어 있으면 페이지에 프롬프트 상자가 표시됩니다. 그렇지 않으면 프롬프트 상자가 자동으로 사라집니다.
코드에서는 jQuery의 클릭 메소드를 사용합니다. 사용자가 제출 버튼을 클릭하면 val 메소드를 사용하여 입력 상자의 내용을 가져오고 비어 있는지 확인합니다. 비어 있으면 페이지에 표시될 수 있도록 프롬프트 상자의 숨겨진 클래스를 제거클래스 메소드를 사용하여 삭제합니다. 그렇지 않으면 프롬프트 상자가 자동으로 숨겨지도록 addClass 메소드를 사용하여 숨겨진 클래스를 추가합니다.
결론
초점이 사라지고 숨겨지는 현상은 웹 디자인에서 흔히 나타나는 현상입니다. jQuery를 사용하여 코드를 작성하면 이 효과를 쉽게 얻을 수 있습니다. 이 기사에서는 사라지는 포커스에 대한 지식을 소개하고 몇 가지 예제 코드를 제공합니다. 초점이 사라지고 숨는 효과를 얻으려면 이 문서에 제공된 코드를 참조하여 해당 수정 및 조정을 수행할 수 있습니다.
위 내용은 jquery 포커스가 사라지고 숨겨집니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!