0

私の主な目的は、順序付けられていないliにアクティブなクラスを追加することです。これは、ユーザーが基づいている特定のページに基づいています。基本的に条件付きフォーマット。レスポンシブデザインを作成したいと思っていますが、現在MAMPでjQueryを学習しています。

現在の遅い方法...

HTML

<nav id="main-site-nav" class="main-menu">
 <ul>
  <li><a href="index.php" class="crnt-page">Home</a></li>
  <li><a href="/services.php">Services</a></li>
  <li><a href="/certification.php" >Certification</a></li>
  <li><a href="/customers.php">Customers</a></li>
  <li><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>

CSS

#main-site-nav .crnt-page {
 color: #E8A317;
 text-decoration:none;
}

すべてのliにクラスを追加する必要があります。ページの下部にあるmain.jsでこれを実行したいと思います。どんな助けでもありがたいです。

アップデート！

これが最終的なPHPソリューションでした。私はこれをWordpressに移植したいと思っていますが。

<nav id="main-site-nav" class="main-menu">
  <ul>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="crnt-page"';?>href="index.php">Home</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'services.php')) echo 'class="crnt-page"';?>href="/services.php">Services</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'certification.php')) echo 'class="crnt-page"';?>href="/certification.php">Certification</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'customers.php')) echo 'class="crnt-page"';?>href="/customers.php">Customers</a></li>
    <li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact-me.php')) echo 'class="crnt-page"';?>href="/contact-me.php">Contact Me</a></li>
  </ul>
</nav>

迅速な対応ありがとうございます！今、私はスタックオーバーフローでこの事前にフォーマットされたコードオプションに慣れる必要があります:)

4

4 に答える 4

0

これは私のために働きます：

<style>.green {background-color: green;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
  <ul>
    <li><a href="bla.html">bla</a></li>
    <li><a href="test2.html">test</a></li>
    <li><a href="pfff.html">pff</a></li>
    <li><a href="bar.html">foo</a></li>
  </ul>

<script type="text/javascript">
  var url = /\/([^\/]+)$/.exec(document.location.href)[1];
  $('a[href="' + url + '"]').addClass('green');
</script>
于 2012-11-12T16:57:39.653 に答える
0

私は次のようなものを提案します（テストされていませんが）：

var currentPage = document.location.href.split('/').pop().toLowerCase();

$('#main-site-nav a').filter(
    function(){
        return currentPage == this.href.split('/').pop().toLowerCase();
    }).addClass('crnt-page');

ただし、これはサーバー側で行う方がはるかに簡単です（サーバーがページを生成している間）。

参照：

于 2012-11-12T16:31:45.977 に答える
0

最も簡単な方法は、次のように、各ページの本文にクラスを追加することです。

<body class="services">

次に、リストで次のようにliまたはaのいずれかにクラスを追加します。

<li class="services"><a href="..."></a></li>
<li class="certification"><a href="..."></a></li>

そして、スクリプトで次のようにします。

$(document).ready(function() {
    var bodyClass = $("body").attr("class");
    $("li."+bodyClass).find("a").addClass("crnt-page");
});

これはさまざまな方法で行うことができますが、必ずしもこの方法である必要はありません（特に、すでに体にクラスがある場合）が、一般的な考え方は同じです。

于 2012-11-12T16:33:06.863 に答える
0

これは、PHPを使用して行うことができます。

これがPHPのアイデアです。

<nav id="main-site-nav" class="main-menu">
 <ul>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'index.php') echo 'class="crnt-page"'; ?>><a href="index.php" class="crnt-page">Home</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'services.php') echo 'class="crnt-page"'; ?>><a href="/services.php">Services</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'certification.php') echo 'class="crnt-page"'; ?>><a href="/certification.php" >Certification</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'customers.php') echo 'class="crnt-page"'; ?>><a href="/customers.php">Customers</a></li>
  <li <?php if($_SERVER["SCRIPT_NAME"] == 'contact-me.php') echo 'class="crnt-page"'; ?>><a href="/contact-me.php">Contact Me</a></li>
 </ul>
</nav>
于 2012-11-12T16:35:30.990 に答える