Wordpress的主題頁面tabs的js用法

Wordpress的主題頁面tabs的js用法

首先推薦一個網站，https://www.w3schools.com/howto/howto_js_tabs.asp

我在這個網站提供的代碼的基礎上做了一個tabs。


設計的基本框架我依然延續用的是推薦網站上的基本代碼：

<h2>Tabs</h2>
<p>Click on the x button in the top right corner to close the current tab:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

網站的JavaScript代碼是：


<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
 
首先這個案例中顯示的執行的是click事件，也就是儅鼠標點擊的時候顯示，我想網站達到的是鼠標掠過放上去的時候就顯示，這裏我把button裏面的onclick修改成 onmouseover

 <button class="tablinks" onmouseover="openCity(event, 'London')" id="defaultOpen">

<a href="<?php echo esc_url( home_url( '/' ) ); ?>

blog/category/css樣式/css字體樣式">css字體樣式</a></button>

 <button class="tablinks" onmouseover="openCity(event, 'Paris')">

css背景樣式</button>

 <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">

css-border樣式</button>

JavaScript 最後面的defaultOpen 也做一下修改：

 // Get the element with id="defaultOpen" and click on it

        document.getElementById("defaultOpen").onmouseover();

之後，把

<div id="London" class="tabcontent">

</div>

裏面的内容替換成wordpress調取的内容，

<ul>

          <?php

    $args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 8 );

    $myposts = get_posts( $args );

    foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

          <li>

            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span>

          </li>

          <?php endforeach; 

    wp_reset_postdata();?>

        </ul>

如圖中所示，wordpress的文章調取中，有個$args 的命令，在調取category時，我才用的上述調用命令，感覺這樣比較簡練一些，其中offset的意思在這裏是要高於一個的，也就是從一開始。

修改調用后的代碼如下圖。

<div class="row">

  <div id="primary" class="content-area">

    <main id="main" class="site-main">

      <h2>Vertical Tabs</h2>

      <p>Click on the buttons inside the tabbed menu:</p>

      <div class="tab">

        <button class="tablinks" onmouseover="openCity(event, 'London')" 

id="defaultOpen"><a href="<?php echo esc_url( home_url( '/' ) ); ?>

blog/category/css樣式/css字體樣式">css字體樣式</a></button>

        <button class="tablinks" onmouseover="openCity(event, 'Paris')">

css背景樣式</button>

        <button class="tablinks" onmouseover="openCity(event, 'Tokyo')">

css-border樣式</button>

      </div>

      <div id="London" class="tabcontent">

        <ul>

          <?php

    $args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 7 );

    $myposts = get_posts( $args );

    foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

          <li>

            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

          </li>

          <?php endforeach; 

    wp_reset_postdata();?>

        </ul>

      </div>

      <div id="Paris" class="tabcontent">

        <ul>

          <?php

    $args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 8 );

    $myposts = get_posts( $args );

    foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

          <li>

            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span>

          </li>

          <?php endforeach; 

    wp_reset_postdata();?>

        </ul>

      </div>

      <div id="Tokyo" class="tabcontent">

        <ul>

          <?php

    $args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 9 );

    $myposts = get_posts( $args );

    foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

          <li>

            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

          </li>

          <?php endforeach; 

    wp_reset_postdata();?>

        </ul>

      </div>

      <script>

        function openCity(evt, cityName) {

          var i, tabcontent, tablinks;

          tabcontent = document.getElementsByClassName("tabcontent");

          for (i = 0; i < tabcontent.length; i++) {

            tabcontent[i].style.display = "none";

          }

          tablinks = document.getElementsByClassName("tablinks");

          for (i = 0; i < tablinks.length; i++) {

            tablinks[i].className = tablinks[i].className.replace(" active", "");

          }

          document.getElementById(cityName).style.display = "block";

          evt.currentTarget.className += " active";

        }

        // Get the element with id="defaultOpen" and click on it

        document.getElementById("defaultOpen").onmouseover();

      </script>

    </main><!-- #main -->

  </div><!-- #primary -->