Question

我正在尝试找出一种通过当前显示的网址更改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元素

中的主页

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

Answer 1

您可以添加$("h4").text($li.text());将<h4>的文字设置为有效<li>的文字。

下面，iframe作为stacksnippets.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，因此您可以看到哪一个是活动的。

使用* .ini配置文件

1 个答案: