使用 *.ini 配置文件通过 URL 更改 HTML 文本

Question

我正在尝试找到一种通过当前显示的 URL 更改 HTML 文本的好方法。我已经列出了所有可能出现在 URL 行中的地址以及存储在 *.ini 文件中的相应文本。

HTML

...
<?php $conf = parse_ini_file('config.ini.php'); ?>
<script type="text/javascript">
 $(function() {
   var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
   var baseurl = window.location.href
   $("ul.navbar li a").each(function(){
     if($(this).attr("href") == pgurl || $(this).attr("href") == baseurl )
     $(this).parent('li').addClass("active");
   })
 });
</script>
...
<h4 class="panel-title">Home</h4>
...
<ul class="navbar">
  <li><a href="<?php echo $conf['webaddr']; ?>"><?php echo $conf['page_0']; ?></a></li>
  <li><a href="<?php echo $conf['page_1_addr']; ?>"><?php echo $conf['page_1']; ?></a></li>
  <li><a href="<?php echo $conf['page_2_addr']; ?>"><?php echo $conf['page_2']; ?></a></li>
  <li><a href="<?php echo $conf['page_3_addr']; ?>"><?php echo $conf['page_3']; ?></a></li>
  <li><a href="<?php echo $conf['page_4_addr']; ?>"><?php echo $conf['page_4']; ?></a></li>
  <li><a href="<?php echo $conf['page_5_addr']; ?>"><?php echo $conf['page_5']; ?></a></li>
  <li><a href="<?php echo $conf['page_6_addr']; ?>"><?php echo $conf['page_6']; ?></a></li>
</ul>
...

*.INI

...
[site_url]
webaddr='http://example.com/';  -- be sure to include forward slash after the web address!

[pages]
page_0='Home';
page_1='Page 1';
page_2='Page 2';
page_3='Page 3';
page_4='Page 4';
page_5='Page 6';
page_6='Page 7';

[pages_addr]
page_0_addr='#';
page_1_addr='page1.php';
page_2_addr='page2.php';
page_3_addr='page3.php';
page_4_addr='page4.php';
page_5_addr='page5.php';
page_6_addr='page6.php';
...

在这种情况下要更改的文本将是 H4 元素中的 Home

虽然最好的解决方案是使用 JavaScript，但我不知道如何正确地将 *.ini 文件解析为 JavaSrcipt 以及如何进行比较。

Answer 1

您可以添加$("h4").text($li.text()); 以将<h4> 的文本设置为活动<li> 的文本。

在下面，iframe 作为 stacksn-ps.com/js 运行，因此 js 页面被突出显示。

li {
  list-style: none;
  background: #ddd;
  width: 100px;
  border: 1px solid #eee;
  border-radius: 2px;
}

.active {
  background: #dfd;
  border: 1px solid #efe;
}

a {
 color: gray;
 padding: 10px;
}

a:visited {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $(".navbar li a").each(function() {
      var $anchor = $(this);
      var $li = $anchor.parent('li');
      if ($anchor.attr("href") === pgurl) {
        $li.addClass("active");
        $("h4").text($li.text());
      }
    })
  });
</script>

<h4 class="panel-title">Home</h4>

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  <li><a href="js">JavaScript</a></li>
  <li><a href="another">Another</a></li>
</ul>

我添加了一些 CSS，以便您查看哪个是活动的。