这里我试图创建滑块内部的图像库和选项卡式内容。 滑块是bxslider，工作正常。但标签和图片库无法正常工作
你能帮帮我吗？ https://rashanoureldin.github.io/surfers/更新 这是css的代码：
/ ** * *滑块部分 * * /
.slider-wrap{
background: url('../images/corner.png') no-repeat top left #fff;
height: 600px;
width: 88.1%;
margin: 0 auto;
padding: 45px 30px;
box-shadow: 0px -8px 30px 0px rgba(0, 0, 0, 0.34);
position: relative;
}
.slider-content{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.slider-counter{
display: block;
background: #000;
position: absolute;
right: 0;
top: 88px;
color: #fff;
padding: 12px 10px;
font-family: 'Montserrat';
font-size: 14px;
font-weight: 700;
}
.slider-counter:hover{
color: #fff;
cursor: pointer;
}
.rotate {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top;
-ms-transform: rotate(90deg);
-ms-transform-origin: left top;
-o-transform: rotate(90deg);
-o-transform-origin: left top;
transform: rotate(90deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
font-family: 'Montserrat';
font-size: 127px;
font-weight: 700;
}
.img-gallery-wrap{
width: 55%;
display: flex;
flex-wrap: wrap;
}
.big-img{
width: 75%;
}
.thumbwrap{
width: 25%;
}
.prod-desc-wrap{
width: 45%;
}
.thumbwrap ul{
width: 100%;
height: 100%;
padding: 113px 25px;
display: flex;
flex-direction: column;
}
.thumb_x{
width: 70px;
height: 70px;
border: 1px solid rgba(0, 0, 0, 0.20);
margin: 0 auto 5px auto;
overflow: hidden;
}
.thumb_x.added-select{
border: 3px solid #00b0ff;
}
.thumb_x img{
height: 100%;
}
.prod-heading h2{
font-family: 'Montserrat';
font-size: 20px;
font-weight: 700;
text-align: left;
color: #000;
margin: 0;
}
.nav-tabs > li > a{
border: none;
border-radius: 0;
font-family:'Raleway';
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
color: #a0a0a0;
}
.nav-tabs > li > a:hover{
background-color: transparent;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
background-color: transparent;
border: 0px;
border-bottom: 3px solid #00b0ff;
color: #000;
}
.detail-tabs .tab-content .tab-pane{
text-align: left;
padding: 25px 20px 0 0 ;
overflow: hidden;
}
.detail-tabs .tab-content .tab-pane p{
/* font-family: 'Playfair Display';
font-style: normal; */
font-weight: 400;
color: #787878;
font-size: 16px;
line-height: 24px;
padding-bottom: 34px;
}
.order ul li{
display: inline-block;
}
a.price , a.buynow{
font-family: 'Montserrat';
font-weight: 700;
margin-right: 30px;
}
a.price{
font-size: 24px;
}
a.buynow{
font-size: 14px;
color: #fff;
padding: 15px 30px;
background-color: #00b0ff;
text-transform: uppercase;
}
.viewall{
margin-top: 70px;
}
a.view-all{
font-family: 'Montserrat';
font-size: 16px;
color: #00b0ff;
text-decoration: underline;
}
.rating{
margin-top: 18px;
width: 100%;
margin-bottom: 20px;
}
.lead{
text-align: left;
font-size: 14px;
color: #f2d800;
}
.rate-counter , .starrr{
float: left;
}
.rate-counter{
margin-left: 8px;
}
.rate-counter a{
font-family: 'Montserrat';
font-size: 12px;
color: #787878;
}
.starrr{
padding-top: 2px;
}
这是css代码，还有什么需要我添加？
答案 0 :(得分：0)
这里的问题是每个选项卡都有一个id（这是唯一的）和bx滑块添加每个幻灯片的一个克隆，以便使用bootstrap js代码产生问题（重复的ID），因此将标签ID更改为类可以解决问题
修改 因为在href中放入一个类是无效的html，只能在chrome中使用，所以我已经改为数据目标而不是href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Surfers Co</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i" rel="stylesheet">
<!-- Custom CSS -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> -->
<link href="https://rashanoureldin.github.io/surfers/css/font-awesome.min.css" rel="stylesheet">
<link href="https://rashanoureldin.github.io/surfers/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="image-bg-fluid-height">
<!-- Navigation -->
<nav class="main-nav navbar navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#">Surfers Co.</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li>
<a href="#">Boards</a>
</li>
<li>
<a href="#">Accessories</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Technology</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Dealers</a>
</li>
</ul>
<ul class="social navbar-right">
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Slogan -->
<section>
<div class="container">
<div class="row">
<div class="slogan col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-2">
<h1>Ride every wave as if it's your last</h1>
<p>We love the motion of the ocean</p>
</div>
</div>
</div>
</section>
<!-- Slider -->
<section>
<div class="container">
<div class="row">
<div class="slider-wrap">
<!-- <span class="rotate">BOARDS</span> -->
<a class="slider-counter">05/25</a>
<div class="bxslider">
<div class="slider-content">
<div class="img-gallery-wrap">
<div class="big-img">
<img src="images/boards.png" alt="Boards">
</div>
<div class="thumbwrap">
<ul>
<li class="thumb_x added-select"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
</ul>
</div>
</div>
<div class="prod-desc-wrap">
<div class="prod-heading">
<h2>JR Surfboards The Donny Stoker Yellow/Green Rail Fade</h2>
<div class="rating">
<div class="lead">
<div id="stars" class="starrr"></div>
<div class="rate-counter"><a href="">(52)</a></div>
</div>
<div class="rate-counter"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="detail-tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target=".menu_1" href="#" >Description</a></li>
<li><a data-toggle="tab" data-target=".menu_2" href="#" >Features</a></li>
<li><a data-toggle="tab" data-target=".menu_3" href="#" >Dimensions</a></li>
</ul>
<div class="tab-content">
<div class="menu_1 tab-pane fade in active">
<p>Easy to ride, care free surfing craft that's fun for everyone, paddles well, super fast down the line and great for any level of surfing depending on who rides it. The Donny Stoker, a rework on design from stokesys first ever pro model. A super easy to surf and fun board. The Donny Stoker is a board for total freesurfing expression.</p>
<div class="order">
<ul>
<li><a class="price" href="">$499.99</a></li>
<li><a class="buynow" href="">Buy now</a></li>
</ul>
</div>
<div class="viewall"><a href="" class="view-all">View all boards</a></div>
</div>
<div class="menu_2 tab-pane fade">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="menu_3 tab-pane fade">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div> <!-- Slider-Content-End -->
<div class="slider-content">
<div class="img-gallery-wrap">
<div class="big-img">
<img src="images/boards.png" alt="Boards">
</div>
<div class="thumbwrap">
<ul>
<li class="thumb_x added-select"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
<li class="thumb_x"><a href="" data-largeImg="images/boards.png"><img src="images/boards.png" alt="" class="thumbnail-img"></a></li>
</ul>
</div>
</div>
<div class="prod-desc-wrap">
<div class="prod-heading">
<h2>JR Surfboards The Donny Stoker Yellow/Green Rail Fade</h2>
<div class="rating">
<div class="lead">
<div id="stars" class="starrr"></div>
<div class="rate-counter"><a href="">(52)</a></div>
</div>
<div class="rate-counter"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="detail-tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target=".menu__1" href="#" >Description</a></li>
<li><a data-toggle="tab" data-target=".menu__2" href="#" >Features</a></li>
<li><a data-toggle="tab" data-target=".menu__3" href="#" >Dimensions</a></li>
</ul>
<div class="tab-content">
<div class="menu__1 tab-pane fade in active">
<p>Easy to ride, care free surfing craft that's fun for everyone, paddles well, super fast down the line and great for any level of surfing depending on who rides it. The Donny Stoker, a rework on design from stokesys first ever pro model. A super easy to surf and fun board. The Donny Stoker is a board for total freesurfing expression.</p>
<div class="order">
<ul>
<li><a class="price" href="">$499.99</a></li>
<li><a class="buynow" href="">Buy now</a></li>
</ul>
</div>
<div class="viewall"><a href="" class="view-all">View all boards</a></div>
</div>
<div class="menu__2 tab-pane fade">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="menu__3 tab-pane fade">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div> <!-- Slider-Content-End -->
</div>
</div> <!-- Slider-Wrap-End -->
</div> <!-- Row End -->
</div> <!-- Container End -->
</section>
<!-- Content Section -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="section-heading">Section Heading</h1>
<p class="lead section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="section-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</div>
</div>
</section>
<!-- Fixed Height Image Aside -->
<!-- Image backgrounds are set within the full-width-pics.css file. -->
<aside class="image-bg-fixed-height"></aside>
<!-- Content Section -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="section-heading">Section Heading</h1>
<p class="lead section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="section-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2018</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.thumb_x a').click(function(e){
e.preventDefault();
var thisThumbItem = $(this);
//set large image src
thisThumbItem.parents('.img-gallery-wrap').find('.big-img img').fadeTo("slow",0.7,function(){
var thisBigImg = $(this);
thisBigImg.attr('src', thisThumbItem.attr('data-largeImg') );
thisBigImg.fadeTo("slow",1);
});
//set selected thumbnail
thisThumbItem.parents('.thumbwrap').find('.thumb_x').removeClass('added-select');
thisThumbItem.parents('.thumb_x').addClass('added-select');
});
$('.bxslider').bxSlider({
pager:false,
infiniteLoop: false
});
});
$(".alert").addClass("in").fadeOut(3500);
// starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;
(function($, window) {
var Starrr;
Starrr = (function() {
Starrr.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, value) {}
};
function Starrr($el, options) {
var i, _, _ref,
_this = this;
this.options = $.extend({}, this.defaults, options);
this.$el = $el;
_ref = this.defaults;
for (i in _ref) {
_ = _ref[i];
if (this.$el.data(i) != null) {
this.options[i] = this.$el.data(i);
}
}
this.createStars();
this.syncRating();
this.$el.on('mouseover.starrr', 'span', function(e) {
return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'span', function(e) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('starrr:change', this.options.change);
}
Starrr.prototype.createStars = function() {
var _i, _ref, _results;
_results = [];
for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
_results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"));
}
return _results;
};
Starrr.prototype.setRating = function(rating) {
if (this.options.rating === rating) {
rating = void 0;
}
this.options.rating = rating;
this.syncRating();
return this.$el.trigger('starrr:change', rating);
};
Starrr.prototype.syncRating = function(rating) {
var i, _i, _j, _ref;
rating || (rating = this.options.rating);
if (rating) {
for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
}
if (!rating) {
return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
};
return Starrr;
})();
return $.fn.extend({
starrr: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var data;
data = $(this).data('star-rating');
if (!data) {
$(this).data('star-rating', (data = new Starrr($(this), option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr();
});
$( document ).ready(function() {
$('#stars').on('starrr:change', function(e, value){
$('#count').html(value);
$('.alert').removeClass('hide').show().delay(1000).addClass("in").fadeOut(3500);
});
});
</script>
</body>
</html>