使用* .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元素

我雖然文本最好的解決方案將使用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所以你可以看到哪一個是積極的。