コード編集：
結果確認 »
<html lang="en"> <head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> <style> .test a { background-color: red !important; color: white !important; } </style> </head> <body style="height:1500px;padding:20px;"> <h3>Magellan Options</h3> <h5 class="subheader">The <code>active_class</code> option specifies the class used for active links in the magellan bar. Default is .active. In this example, we set it to .test (look what .test do in the style section above):</h5> <hr> <div data-magellan-expedition="fixed" data-options="active_class:test"> <dl class="sub-nav"> <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd> <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd> </dl> </div> <hr> <div style="height:200px;background-color:#1abc9c;color:white;"> <h3 data-magellan-destination="page1">Page1</h3> <a name="page1"></a> <p>Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <h3 data-magellan-destination="page2">Page2</h3> <a name="page2"></a> <p>Try to scroll this section and look at the navigation bar while scrolling! Also try to scroll upwards.</p> <!-- Initialize Foundation JS --> <script> $(document).ready(function() { $(document).foundation(); }) </script> </body> </html>
結果：