Optimized jquery script Script for simple feature tour
I create a simple feature tour sort of like what rdio and facebookFacebook are doing. This is my script - howHow can I make it better?
Html:HTML:
Optimized jquery script for simple feature tour
I create a simple feature tour sort of like what rdio and facebook are doing. This is my script - how can I make it better?
Html:
Script for simple feature tour
I create a simple feature tour sort of like what rdio and Facebook are doing. How can I make it better?
HTML:
Bill Barry
- 2.3k
- 14
- 18
$(function (){
{
$('a.close, a.closebtn').click(function () {
$(".tour-block").hide();
});
$('a.tour-step-01').click(function () {
$(".tour-block").hide();
$(".tour-block.tr01").fadeIn();
});
$('#tourblock-01, a.tour-step-02').click(function () {
$(".tour-block").hide();
$(".tour-block.tr02").fadeIn();
});
$('#tourblock-02, a.tour-step-03').click(function () {
$(".tour-block").hide();
$(".tour-block.tr03").fadeIn();
});
$('#tourblock-03, a.tour-step-04').click(function () {
$(".tour-block").hide();
$(".tour-block.tr04").fadeIn();
});
});
Html:
<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-01" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr02">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-02" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr03">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-03" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr04">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-04" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr05">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" class="closebtn">Close</a>
</div>
</div>
$(function (){
$('a.close, a.closebtn').click(function () {
$(".tour-block").hide();
});
$('a.tour-step-01').click(function () {
$(".tour-block").hide();
$(".tour-block.tr01").fadeIn();
});
$('#tourblock-01, a.tour-step-02').click(function () {
$(".tour-block").hide();
$(".tour-block.tr02").fadeIn();
});
$('#tourblock-02, a.tour-step-03').click(function () {
$(".tour-block").hide();
$(".tour-block.tr03").fadeIn();
});
$('#tourblock-03, a.tour-step-04').click(function () {
$(".tour-block").hide();
$(".tour-block.tr04").fadeIn();
});
});
<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-01" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr02">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-02" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr03">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-03" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr04">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-04" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr05">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" class="closebtn">Close</a>
</div>
</div>
$(function () {
$('a.close, a.closebtn').click(function () {
$(".tour-block").hide();
});
$('a.tour-step-01').click(function () {
$(".tour-block").hide();
$(".tour-block.tr01").fadeIn();
});
$('#tourblock-01, a.tour-step-02').click(function () {
$(".tour-block").hide();
$(".tour-block.tr02").fadeIn();
});
$('#tourblock-02, a.tour-step-03').click(function () {
$(".tour-block").hide();
$(".tour-block.tr03").fadeIn();
});
$('#tourblock-03, a.tour-step-04').click(function () {
$(".tour-block").hide();
$(".tour-block.tr04").fadeIn();
});
});
Html:
<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-01" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr02">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-02" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr03">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-03" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr04">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-04" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr05">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" class="closebtn">Close</a>
</div>
</div>
$(function (){
$('a.close, a.closebtn').click(function () {
$(".tour-block").hide();
});
$('a.tour-step-01').click(function () {
$(".tour-block").hide();
$(".tour-block.tr01").fadeIn();
});
$('#tourblock-01, a.tour-step-02').click(function () {
$(".tour-block").hide();
$(".tour-block.tr02").fadeIn();
});
$('#tourblock-02, a.tour-step-03').click(function () {
$(".tour-block").hide();
$(".tour-block.tr03").fadeIn();
});
$('#tourblock-03, a.tour-step-04').click(function () {
$(".tour-block").hide();
$(".tour-block.tr04").fadeIn();
});
});
<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-01" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr02">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-02" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr03">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-03" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr04">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-04" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr05">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" class="closebtn">Close</a>
</div>
</div>
$(function (){
$('a.close, a.closebtn').click(function () {
$(".tour-block").hide();
});
$('a.tour-step-01').click(function () {
$(".tour-block").hide();
$(".tour-block.tr01").fadeIn();
});
$('#tourblock-01, a.tour-step-02').click(function () {
$(".tour-block").hide();
$(".tour-block.tr02").fadeIn();
});
$('#tourblock-02, a.tour-step-03').click(function () {
$(".tour-block").hide();
$(".tour-block.tr03").fadeIn();
});
$('#tourblock-03, a.tour-step-04').click(function () {
$(".tour-block").hide();
$(".tour-block.tr04").fadeIn();
});
});
$(function (){
$('a.close, a.closebtn').click(function () {
$(".tour-block").hide();
});
$('a.tour-step-01').click(function () {
$(".tour-block").hide();
$(".tour-block.tr01").fadeIn();
});
$('#tourblock-01, a.tour-step-02').click(function () {
$(".tour-block").hide();
$(".tour-block.tr02").fadeIn();
});
$('#tourblock-02, a.tour-step-03').click(function () {
$(".tour-block").hide();
$(".tour-block.tr03").fadeIn();
});
$('#tourblock-03, a.tour-step-04').click(function () {
$(".tour-block").hide();
$(".tour-block.tr04").fadeIn();
});
});
<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-01" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr02">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-02" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr03">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-03" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr04">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" id="tourblock-04" class="btn btn-primary active">Next</a>
</div>
</div>
<div class="tour-block tr05">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
<div class="modal-footer">
<span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
<a href="#" class="closebtn">Close</a>
</div>
</div>
Loading
default