フォローする

Growth Hack Tips

※こちらのコードはあくまでもサンプルですので、適宜ご変更ください。

要素を入れ替える

CASE要素Cを要素Aの前に移動する。

SAMPLE

HTML


<p class="insert-a">要素A</p>
<p class="insert-b">要素B</p>
<p class="insert-c">要素C</p>

JavaScript


$(".insert-c").insertBefore(".insert-a");

※要素Cを要素Aの後に移動する場合は「insertAfter」を使います。

DEMO

Before

要素A

要素B

要素C

After

要素A

要素B

要素C

要素を追加する

CASE要素Aの前に要素Cを追加する。

SAMPLE

HTML


<p class="before-a">要素A</p>
<p class="before-b">要素B</p>

JavaScript


$(".before-a").before('<p class="before-c">要素C</p>');

※要素Aの後に要素Cを追加する場合は「after」を使います。

DEMO

Before

要素A

要素B

After

要素A

要素B

要素を複製する

CASE要素Aを複製し、要素Cの後ろに追加する。

SAMPLE

HTML


<p class="copyafter-a">要素A</p>
<p class="copyafter-b">要素B</p>
<p class="copyafter-c">要素C</p>

JavaScript


$(".copyafter-a").clone().insertAfter(".copyafter-c");

DEMO

Before

要素A

要素B

要素C

After

要素A

要素B

要素C

画像を変更する

CASE要素Aの赤い画像を、黒い画像に変更する。

SAMPLE

HTML


<img src="/hc/ja/article_attachments/202704902/red.gif" alt="要素A" />

JavaScript


$("img[src*=red.gif']").attr("src","/hc/ja/article_attachments/202704882/black.gif");

※画像要素も合わせて変更する場合は以下のように書きます。
 例 [width] → $(“**”).attr({"src”:”**.png","alt":"","width”:”**”});

DEMO

Before

After

要素A

要素を開閉させる

CASEク要素Aをクリックすると、要素A-1 要素A-2 要素A-3が表示される。

SAMPLE

HTML


<p class="demo-title">要素A</p>
<ul class="demo-toggle">
<li>要素A-1</li>
<li>要素A-2</li>
<li>要素A-3</li>
</ul>

CSS


.demo-toggle {
    display: none;
}
.demo-title {
    margin:0;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #4c566c;
    padding: 8px 20px;
}
.demo-title:hover {
    background: #4c566c;
    color: #fff;
}
.demo-title:after {
    content: "+";
    display: inline-block;
    margin-left: 10px;
}
.demo-title.open:after {
    content:"-";
}

JavaScript


$(function() {
    $(".demo-title").click(function(){
    $(this).next().slideToggle();
    $(this).toggleClass("open");
}); 
});

DEMO

Before

要素A

  • 要素A-1
  • 要素A-2
  • 要素A-3

After

要素A

  • 要素A-1
  • 要素A-2
  • 要素A-3

滑らかなスクロール

CASE要素Aをクリックすると、ページ上部へ滑らかにスクロールする。

SAMPLE

HTML


<p class="smooth-scroll-title">
<a id="smooth-link" href="#">要素A</a>
</p>

JavaScript


$(function(){
   $('a#smooth-link').click(function() {
      var time = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, time, 'swing');
      return false;
   });
});

DEMO

Before

After

要素を固定位置に表示

CASEページをスクロールすると、要素Aがページ左端の固定位置に表示される。

SAMPLE

HTML


<ul class="anchor">
<li><a href="#insert">要素を入れ替える</a></li>
<li><a href="#add-content">要素を追加する</a></li>
・
・
・
</ul>

CSS


.anchor {
    margin-bottom: 0;
    position: fixed;
    top: 60px;
    left: 0;
}
.anchor li {
    list-style: none;
    margin: 0 0 10px 0;
}
.anchor li a:after {
    content: "≫";
    display: inline-block;
    position: absolute;
    right: 10px;
    font-size: 12px;
}
.anchor li a {
    text-decoration: none;
    border: 1px solid #4c566c;
    padding: 0 25px 0 5px;
    color: #4c566c;
    background:#fff;
    display:block;
    font-size:12px;
    border-left:none;
    position: relative;
}
.anchor li a:hover {
    background: #4c566c;
    color: #fff;
}

JavaScript


setInterval(function(){
   var scroll = $("body").scrollTop();
   var scrollY = 150;
   if(scroll > scrollY) {
      $(".anchor").show();
   } else {
      $(".anchor").hide();
   }
},100);

DEMO

After

ページ左端の目次

要素をタブで切り替える

CASE複数の内容をタブメニューで切り替えて表示させる。

SAMPLE

HTML


<ul class="tab-menu-area">
<li class="active">タブ 要素A</li>
<li>タブ 要素B</li>
<li>タブ 要素C</li>
</ul>
<div class="tab-content active">内容 要素A</div>
<div class="tab-content">内容 要素B</div>
<div class="tab-content">内容 要素C</div>

CSS


ul.tab-menu-area{
    list-style: none;
}
ul.tab-menu-area li {
    float: left;
    padding: 8px 30px;
    background-color: #f2f2f2;
    cursor: pointer;
    line-height: 2em;
}
ul.tab-menu-area li:hover {
    color: #ff0000;
}
ul.tab-menu-area li.active {
    background-color: #4c566c;
    color: #fff;
}
div.tab-content {
    clear: both;
    border: 1px solid #ccc;
    padding: 20px;
    width: 636px;
    display: none;
}
div.active {
    display: block;
}

JavaScript


$(function() {
    $(".tab-menu-area li").click(function() {
        var num = $(".tab-menu-area li").index(this);
        $(".tab-content").removeClass('active');
        $(".tab-content").eq(num).addClass('active');
        $(".tab-menu-area li").removeClass('active');
        $(this).addClass('active')
    });
});

DEMO

Before

  • タブ 要素A
  • タブ 要素B
  • タブ 要素C
内容 要素A
内容 要素B
内容 要素C

After

  • タブ 要素A
  • タブ 要素B
  • タブ 要素C
内容 要素A
内容 要素B
内容 要素C

スライドショーを追加する

CASE複数画像を1つのスライドショーで表示させる。

SAMPLE

HTML


<div class="slide-in">
<img src="/hc/ja/article_attachments/202717702/Slack_for_iOS_Upload._null_.jpeg" alt="食べ物" width="300px" />
<img src="/hc/ja/article_attachments/202717662/Slack_for_iOS_Upload-2._null_.jpeg" alt="食べ物" width="300px" />
<img src="/hc/ja/article_attachments/202717682/Slack_for_iOS_Upload-1._null_.jpeg" alt="食べ物" width="300px" />
</div>

CSS


.slide-in { position:relative; width:300px;  }
.slide-in img { position:absolute; left:0; top:0; }

JavaScript


$('.slide-in img:gt(0)').hide();
setInterval(function() {
    $('.slide-in :first-child').fadeOut().next('img').fadeIn().end().appendTo('.slide-in');
}, 4500);

DEMO

Before

After

バリデーションを追加する

CASE未入力時にエラー文が表示されるようにする。

SAMPLE

HTML


    <p id="errer"></p>
    <input id="input" maxlength="20" name="chkinput" size="30" type="text" />
    <button id="check">チェックする</button>
    

CSS


    #errer { border: 1px solid #ccc; }
    

JavaScript


    $("#check").click(function() {
      if($("#input").val() == "") {
        $("#errer").text('未入力です');
        $("#errer").css('color','red');
      } else{
        $("#errer").text('OK!!');
        $("#errer").css('color','green');
      }
    });
    

DEMO

Before

 

After

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。