您只需向要显示 SharePoint 列表中数据的 div 添加一个 id。
然后在切换卡片时调用该方法获取列表数据。
我的测试代码供你参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link rel='stylesheet prefetch' href='https://files.krve.io/f/eyespot.css'>-->
<link rel='stylesheet prefetch'
href='https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.6.55/css/materialdesignicons.min.css'>
<style type="text/css">
body {
margin-top: 30px;
background-color: #eee;
}
.list-group.help-group {
margin-bottom: 20px;
padding-left: 0;
margin: 0;
}
.list-group.help-group .faq-list {
display: block;
top: auto;
margin: 0 0 32px;
border-radius: 2px;
border: 1px solid #ddd;
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
}
.list-group.help-group .faq-list .list-group-item {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: #fff;
border: 0;
border-bottom: 1px solid #ddd;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color: #616161;
transition: background-color .2s;
}
.list-group.help-group .faq-list .list-group-item i.mdi {
margin-right: 5px;
font-size: 18px;
position: relative;
top: 2px;
}
.list-group.help-group .faq-list .list-group-item:hover {
background-color: #f6f6f6;
}
.list-group.help-group .faq-list .list-group-item.active {
background-color: #f6f6f6;
font-weight: 700;
color: rgba(0, 0, 0, 0.87);
}
.list-group.help-group .faq-list .list-group-item:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom: 0;
}
.tab-content.panels-faq {
padding: 0;
border: 0;
}
.panel.panel-help {
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
padding-bottom: 0;
border-radius: 2px;
overflow: hidden;
background-color: #fff;
margin: 0 0 16px;
}
.panel.panel-help a[href^="#"],
.panel.panel-help a[href^="#"]:hover,
.panel.panel-help a[href^="#"]:focus {
outline: none;
cursor: pointer;
text-decoration: none;
}
.panel.panel-help .panel-heading {
background-color: #f6f6f6;
padding: 0 16px;
line-height: 48px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
color: rgba(0, 0, 0, 0.87);
}
.panel.panel-help .panel-heading h2 {
margin: 0;
padding: 14px 0 14px;
font-size: 18px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
text-transform: none;
}
.panel.panel-help .panel-body {
background-color: #fff;
border-top: 1px solid #ddd;
border-radius: 2px;
border-top-right-radius: 0;
border-top-left-radius: 0;
margin-top: 0;
}
.panel.panel-help .panel-body p {
margin: 0 0 16px;
}
.panel.panel-help .panel-body p:last-of-type {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-4">
<ul class="list-group help-group">
<div class="faq-list list-group nav nav-tabs">
<a href="#tab1" class="list-group-item active" role="tab" data-toggle="tab"> General Help (Power
Apps/Automate)</a>
<a href="#tab2" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-account"></i>
Environment</a>
<a href="#tab3" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-account-settings"></i>
Mobile</a>
<a href="#tab4" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-star"></i>
Maintainability</a>
<a href="#tab5" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-cart"></i> Errors</a>
<!--<a href="#tab6" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-heart"></i> Lorem ipsum</a>
<a href="#tab7" class="list-group-item" role="tab" data-toggle="tab"><i class="mdi mdi-check"></i> Dolor sit amet</a>-->
</div>
</ul>
</div>
<div class="col-md-8">
<div class="tab-content panels-faq">
<div class="tab-pane active" id="tab1">
<div class="panel-group" id="help-accordion-1">
<div class="panel panel-default panel-help">
<a href="#opret-produkt" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>How do I edit my profile?</h2>
</div>
</a>
<div id="opret-produkt" class="collapse in">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#rediger-produkt" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>How do I upload a new profile picture?</h2>
</div>
</a>
<div id="rediger-produkt" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#ret-pris" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>Can I change my phone number?</h2>
</div>
</a>
<div id="ret-pris" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#slet-produkt" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>Where do I change my privacy settings?</h2>
</div>
</a>
<div id="slet-produkt" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-help">
<a href="#opret-kampagne" data-toggle="collapse" data-parent="#help-accordion-1">
<div class="panel-heading">
<h2>What is this?</h2>
</div>
</a>
<div id="opret-kampagne" class="collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt ut officiis
accusantium quisquam minima praesentium, beatae fugit illo nobis fugiat adipisci quia distinctio
repellat culpa saepe, optio aperiam est!</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="panel-group" id="help-accordion-2">
<div class="panel panel-default panel-help">
<a href="#help-three" data-toggle="collapse" data-parent="#help-accordion-2">
<div class="panel-heading">
<h2>data from list</h2>
</div>
</a>
<div id="help-three" class="collapse in">
<div class="panel-body" id="divResults">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="panel-group" id="help-accordion-2">
<div class="panel panel-default panel-help">
<a href="#help-three" data-toggle="collapse" data-parent="#help-accordion-2">
<div class="panel-heading">
<h2>wuhu</h2>
</div>
</a>
<div id="help-three" class="collapse in">
<div class="panel-body">
<p>test</p>
<p><strong>Example: </strong>Facere, id excepturi iusto aliquid beatae delectus nemo enim, ad saepe
nam et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<div class="panel-group" id="help-accordion-2">
<div class="panel panel-default panel-help">
<a href="#help-three" data-toggle="collapse" data-parent="#help-accordion-2">
<div class="panel-heading">
<h2>wuhu</h2>
</div>
</a>
<div id="help-three" class="collapse in">
<div class="panel-body" >
come on,baby
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script>
// JavaScript Code
$(function () {
// Since there's no list-group/tab integration in Bootstrap
$('.list-group-item').on('click', function (e) {
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active'); // previous list-item
getListData();
$(e.target).addClass('active'); // activated list-item
});
});
function getListData() {
console.log('22222');
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Cities')/items";
console.log(fullUrl);
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
success: onQuerySucceeded,
error: onQueryFailed
});
}
function onQuerySucceeded(data) {
var listItemInfo = " ";
$.each(data.d.results, function (key, value) {
listItemInfo += '<b>Title:</b> ' + value.Title + ' – <b>Industry:</b> ' + value.test + '<br />';
console.log(listItemInfo);
});
$("#divResults").html(listItemInfo);
}
function onQueryFailed() {
alert('Error!');
}
</script>
</body>
</html>
测试结果：
来源清单：
更新：
function onQuerySucceeded(data) {
var listItemInfo = " ";
$.each(data.d.results, function (key, value) {
listItemInfo += '<b>Title:</b> ' + value.Title + ' – <b>Industry:</b> ' + value.test + '<br />';
console.log(listItemInfo);
});
$("#divResults").html(listItemInfo);
console.log($(".content").length)
$(".content").html(listItemInfo);
}