Question

我正在运行Wordpress网站（Divi主题），它能够将代码添加到特定页面。我有一个页面，左侧边栏显示目录，中间文本带有说明，右侧边栏带示例。该网站位于：logan.pverify.com/rest-api。

当用户点击目录时，它是超链接书签#foo。那部分没问题。但是我想在右侧边栏上启动javascript并显示代码示例（我设想这是一系列隐藏或可见的div）。整个事情只有5个左右的部分，所以它并不是那么糟糕。

反正。我无法弄清楚是否有可能做到这一点。我设法让js代码工作。可笑，但这是一个开始。我主要是C＃winforms人。

<script>
jQuery(function($){
    alert('hello');
});
</script>

Answer 1

您需要做的就是首先在CSS中默认隐藏元素，然后使用 .on() method 将click事件处理程序附加到visible元素。此处理程序应使用 .css() method 更改不可见元素的CSS display属性（在此示例中为block）：

$("#visible").on("click", function() {
  $("#hidden").css("display", "block");
});

#hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="visible">
  Visible
</button>

<div id="hidden">
  Hidden content
</div>

希望这有帮助！：）

Answer 2

您需要为每个隐藏的id提供唯一的class=bookmark和div，这些隐藏的foo与内容表上的超链接书签相对应。例如，链接#foo应该有一个ID为onclick=showSection(this)的隐藏div。为内容表中的每个链接添加showSection处理程序，并将函数function showSection(link) { var bookmark = $(link).attr('href').split('#')[1] //find clicked section $('.bookmark').show() // hide all sections $('#' + bookmark).show() //show only clicked section }添加为

anchor

我认为书签链接是foo.com/#bar

形式的html

myfib<- function(){
        fib.a<-1
        fib.b<- 1
        cat(fib.a,", ",fib.b,",",sep="")
        repeat{
                temp<- fib.a+fib.b
                fib.a<-fib.b
                fib.b<-temp
                cat(fib.b,", ", sep="")
                if(fib.b>150){
                        cat("BREAK NOW...")
                        break
                }
        }
}

标记

Answer 3

HTML

var original = window.encodeURIComponent;
window.encodeURIComponent = function (str) {
   return decodeURI(str);
};
$location.url('/somePath?ids=[1,2,3]');
window.encodeURIComponent = original;

jquery的

$（“。nav a”）。点击（function（）{

<div class="form" id="form1">Form 1</div>
<div class="form" id="form2">Form 2</div>
<div class="form" id="form3">Form 3</div>

<div class="nav">
     <a href="#form1">click to see #form1</a>
     <a href="#form2">click to see #form2</a>
     <a href="#form3">click to see #form3</a>
</div>

的CSS

    var attr = $(this).attr("href");
    $(attr).show();
    $(attr).siblings(".form").hide();


});

工作示例

http://jsfiddle.net/8u7n2/

这只会点亮div

http://jsfiddle.net/3gkAV/

它们是两个不同的例子，会给你一个好主意。

Answer 4

我最后做了几件事，我想我会提到。这是一个wordpress网站。实际效果是“主要”TOC标题将链接到文本的该部分作为书签。代码将显示所有div。具有单独端点文档的子标题将隐藏除一个主要和一个示例之外的所有div。因此，净效应是在页面顶部您可以看到示例和描述。感谢大家，这可能是每个人都在思考的问题。

左边是目录的侧栏，它的代码在这里：

<a href="#Overview" onclick="showAll()" >Overview</a>
<br>
<a href="#ClientLibraries" onclick="showAll()" >Client Libraries</a>
<br>
<a href="#Security" onclick="showAll()" >Security and Authorization</a>
<br>
&emsp; &emsp;<a href="#Token" onclick="showBookmark(this)">Token</a>
<br>
<a href="#Endpoints" onclick="showAll()" >Available API Endpoints</a>
<br>
&emsp; &emsp; <a href="#EligibilityInquiry" onclick="showBookmark(this)">EligibilityInquiry</a>
<br>
&emsp; &emsp;
<a href="#GetEligibilityInquiry" onclick="showBookmark(this)">GetEligibilityInquiry</a>
<br>
&emsp; &emsp;
<a href="#GetPayers" onclick="showBookmark(this)">GetPayers</a>

主体的代码如下：

<p id="Overview" /> <div id="OverviewMain" class="bookmark" style="display: block;"> </div>

带示例的右侧边栏的代码如下：

<div id="TokenExample" class="bookmark" style="display: none;"> </div>

JS在Divi的代码模块中。

<script>
function showBookmark(link) {

   var bookmark = jQuery(link).attr('href').split('#')[1]; //find clicked section
   jQuery('.bookmark').css("display", "none"); // hide all sections
   jQuery('#' + bookmark  + 'Example').show();
   jQuery('#' + bookmark  + 'Main').show();
 }
function showAll() {
   jQuery('.bookmark').css("display", "block"); // show all sections
}
</script>

书签上的Javascript操作点击

4 个答案:

HTML

jquery的

的CSS

工作示例

这只会点亮div