Ajax

https://api.jquery.com/jQuery.ajax/

/*enqueue localize*/
wp_enqueue_script('script-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', false);
    //ajax
    wp_localize_script( 'script-js', 'frontend_ajax_object',
        array( 
            'home' => get_option('home'),
        )
    );
/*script pkb*/
var $obj_id = $('.single-salon-collection .num').attr('id');
$.ajax({
url: frontend_ajax_object.home + '/salon-collection/',
context: document.body
}).done(function(data) {
var $number = $(data).find('#' + $obj_id).find('.order').html();
$('.single-salon-collection .num').html($number);
});

文本竖排

writing-mode: vertical-rl;
text-orientation: sideways;

text-orientation CSS属性定义行内文本字符的方向。此属性仅在垂直模式下有效,即writing-mode不是horizontal-tb。这对控制使用垂直脚本的语言的显示以及制作垂直表头是很有用的。

/* Keyword values */ 
text-orientation: mixed; 
text-orientation: upright; 
text-orientation: sideways-right; 
text-orientation: sideways;
text-orientation: use-glyph-orientation;

mixed——将水平脚本的字符旋转90°。自然地表现垂直脚本的特征。默认值。

upright——自然地表现(竖直)水平脚本的字符以及垂直脚本的字形。请注意,此关键字会使所有字符被视为从左到右:使用的值direction被强制为ltr

sideways——使字符按照水平放置的方式布置,但如果writing-modevertical-rl,则整行再向右旋转90°;如果writing-modevertical-lr,则整行向左旋转90°。为了兼容性而保留了sideways的别名sideways-right

use-glyph-orientation——在SVG元素上,这个关键字会导致使用过时的SVG属性值glyph-orientation-verticalglyph-orientation-horizontal

获取hash值页面跳转

js部分

//获取hash值
var $staff_id = window.location.hash;
//提取字符串
var $staff_flag = $staff_id.substr(1, 5);
if ($staff_id.length && ($staff_flag == "staff")) {
//选择对象
$staff_id = $staff_id.replace('#','.');
var $this = $staff_id ;

//coding here 

}

判断滚动位置

function animateContent() {
        var $object = $("a,b,c");
       $object.each(function () {
        var $this = $(this);
        if ($this.length) {
            var $a = $(this).offset().top;
            var $b = $(window).scrollTop();
            var $c = $(window).height() * 0.75;
            var $d = $(window).height();
            var $selfHeight = $(this).height();
            if (($b > ($a - $c)) || ($b > ($a - $d + $selfHeight))) {
                $this.addClass("animate");
            }
        }
    });
    }

页面内外锚点跳转

function hashSome() {
        var $hash = window.location.hash;
        if ($hash.length) {
            var $hash = $hash.split("#")[1];
            if ($($hash).length) {
                var $pst = $('.'+$hash).offset().top - $(".site_header").height();;
                $("html,body").stop().animate({
                    scrollTop: $pst
                }, 1000);
            }
        } else {
            // console.log("No hash");
        };
    }
$(window).on("load", function () { hashSome(); });
function hashChangeFunction() {
        var a = $("a.internal-link");
        a.on("click", function (event) {
            event.preventDefault();
            var $this = $(this);
            var $hash = $this.attr("href");
            var $pst = $('.'+$hash).offset().top - $(".site_header").height();
            $("html,body").stop().animate({
                scrollTop: $pst
            }, 1000);
        });
    }
$(function () { hashChangeFunction();}

对应内容切换

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul{
        list-style: none;
        max-width: 980px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
    ul>li{
        width:20%;
        text-align: center;
        border-left: 1px solid #333;
        float: left;
        cursor: pointer;
        line-height: 40px;
    }
    ul>li:last-child{
        border-right: 1px solid #333;
    }
    .items{
        max-width: 980px;
        margin: 30px auto;
    }
    .item-content{
        background:#999;
        margin: 10px 0;
        width: 100%;
        height: 100px;
        padding: 10px;
    }
    .active{
        background: #339;
        color: #fff;
        position: relative;
    }
    .active::after{
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
        width:16px;
        height: 16px;
        background:#339; 
    }
    .item-content{
        display: none;
    }
    .items .item-content:first-child{
        display: block;
    }
</style>
<ul>
    <li class="active">A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
<div class="items">
    <div class="item-content">1</div>
    <div class="item-content">2</div>
    <div class="item-content">3</div>
    <div class="item-content">4</div>
    <div class="item-content">5</div>
</div>

<script>
$(document).ready(function(){
    "use strict";
    $("ul li").on("click",function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(this).parent().next().children().eq($(this).index()).show().siblings().hide();
        
    })
})    
</script>