在 http://www.collegeinsideview.com/ 上查看图片下方的黄色部分，上面写着“阅读更多关于/college/”的信息.
前 3 个链接不起作用(对于 Columbia、Princeton 和 Brown)，但其余的可以。我收到一个 JS 错误，上面写着 Uncaught Error: Syntax error, unrecognized expression:/columbia/academics/professors/1。这是为什么？
更新 将 JS 从原来的内容更改为
$('#left > li > a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
我不明白这个问题了。
HTML
<%= link_to "Get Paid to Answer Questions", "/the-deal", id: "the_deal", class: "btn btn-link" %>
<h1 id="heading">In-Depth Reviews of Colleges</h1>
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane fade active in" id="columbia">
<%= image_tag "columbia1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "columbia2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "columbia3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Columbia • •".html_safe, "/columbia/academics/professors/1", class: 'school_link' %>
<div class="right">
<p class="question" class="well"><strong>How does the workload impact your social life?</strong></p>
<%= image_tag "columbia_social_atmosphere_7.png", class: 'answers' %>
<%= link_to '--read more--', '/columbia/social-life/social-atmosphere/7', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="princeton">
<%= image_tag "princeton1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "princeton2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "princeton3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Princeton • •".html_safe, "/princeton/academics/professors/1", class: 'school_link' %>
<div class="right">
<p class="question" class="well"><strong>How would you make your classes better?</strong></p>
<%= image_tag "princeton_classes_6.png", class: 'answers' %>
<%= link_to '--read more--', '/princeton/academics/classes/6', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="brown">
<%= image_tag "brown1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "brown2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "brown3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Brown • •".html_safe, "/brown/academics/professors/1", class: 'school_link' %>
<div class="right">
<p class="question" class="well"><strong>Are people intellectual? Do they have thoughtful conversations with each other?</strong></p>
<%= image_tag "brown_social_atmosphere_5.png", class: 'answers' %>
<%= link_to '--read more--', '/brown/social-life/social-atmosphere/5', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="penn">
<div class="left_pane">
<%= image_tag "university-of-pennsylvania1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-pennsylvania2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-pennsylvania3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Penn • •".html_safe, "/university-of-pennsylvania/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Are your classes too hard, or too easy? Why?</strong></p>
<%= image_tag "penn_dificulty_4.png", class: 'answers' %>
<%= link_to '--read more--', '/university-of-pennsylvania/academics/difficulty/4', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="yale">
<div class="left_pane">
<%= image_tag "yale1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "yale2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "yale3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Yale • •".html_safe, "/yale/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Is it easy to make friends? How did you make friends?</strong></p>
<%= image_tag "yale_social_atmosphere_1.png", class: 'answers' %>
<%= link_to '--read more--', '/yale/social-life/social-atmosphere/1', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="cornell">
<div class="left_pane">
<%= image_tag "cornell1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "cornell2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "cornell3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Cornell • •".html_safe, "/cornell/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Mary Donlon Hall</strong></p>
<%= image_tag "cornell_housing_mary_donlon_hall.png", class: 'answers' %>
<%= link_to '--read more--', '/cornell/living-environment/housing/mary-donlon-hall', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="harvard">
<div class="left_pane">
<%= image_tag "harvard1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "harvard2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "harvard3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Harvard • •".html_safe, "/harvard/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Are there comfortable places to study?</strong></p>
<%= image_tag "harvard_campus_2.png", class: 'answers' %>
<%= link_to '--read more--', '/harvard/academics/classes/5', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="dartmouth">
<div class="left_pane">
<%= image_tag "dartmouth1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "dartmouth2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "dartmouth3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Dartmouth • •".html_safe, "/dartmouth/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Do professors make things easy to understand?</strong></p>
<%= image_tag "dartmouth_professors_1.png", class: 'answers' %>
<%= link_to '--read more--', '/dartmouth/academics/professors/1', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="pitt">
<div class="left_pane">
<%= image_tag "university-of-pittsburgh1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-pittsburgh2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-pittsburgh3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Pitt • •".html_safe, "/university-of-pittsburgh/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Neuroscience: What are people in the major like? How would you stereotype them?</strong></p>
<%= image_tag "pitt_neuroscience_8.png", class: 'answers' %>
<%= link_to '--read more--', '/university-of-pittsburgh/academics/majors/neuroscience/8', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="wisconsin">
<div class="left_pane">
<%= image_tag "university-of-wisconsin1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-wisconsin2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-wisconsin3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Wisconsin • •".html_safe, "/university-of-wisconsin/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>How much will not partying limit your social life?</strong></p>
<%= image_tag "wisconsin_parties_3.png", class: 'answers' %>
<%= link_to '--read more--', '/university-of-wisconsin/social-life/parties/3', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="colgate">
<div class="left_pane">
<%= image_tag "colgate1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "colgate2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "colgate3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Colgate • •".html_safe, "/colgate/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Who wouldn't fit in?</strong></p>
<%= image_tag "colgate_social_atmosphere_2.png", class: 'answers' %>
<%= link_to '--read more--', '/colgate/social-life/social-atmosphere/2', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="adelphi">
<div class="left_pane">
<%= image_tag "adelphi-university1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "adelphi-university2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "adelphi-university3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Adelphi • •".html_safe, "/adelphi-university/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>How's the on-campus food (taste, price, health, convenience, hours, variety...)?</strong></p>
<%= image_tag "adelphi_food_1.png", class: 'answers' %>
<%= link_to '--read more--', '/adelphi-university/living-environment/food/1', class: 'read_more' %>
</div>
</div>
</div>
<ul id="left" class="nav nav-pills nav-stacked">
<li id="columbia" class="active"><a href="#columbia">Columbia</a></li>
<li id="princeton"><a href="#princeton">Princeton</a></li>
<li id="brown"><a href="#brown">Brown</a></li>
<li id="penn"><a href="#penn">Penn</a></li>
<li id="yale"><a href="#yale">Yale</a></li>
<li id="cornell"><a href="#cornell">Cornell</a></li>
<li id="harvard"><a href="#harvard">Harvard</a></li>
<li id="dartmouth"><a href="#dartmouth">Dartmouth</a></li>
<li id="pitt"><a href="#pitt">Pitt</a></li>
<li id="wisconsin"><a href="#wisconsin">Wisconsin</a></li>
<li id="colgate"><a href="#colgate">Colgate</a></li>
<li id="adelphi"><a href="#adelphi">Adelphi</a></li>
</ul>
</div>
<div id="notify">
<p>Right now I only have reviews for those 12 schools. Enter your email below to be notified when there's more!</p>
<span id="notify_span">
<%= simple_form_for :subscribe, url: 'subscribe' do |f| %>
<%= f.input :email, placeholder: 'user@domain.com', label: false, required: true %> <br/>
<%= f.button :submit, "1-Click Sign Up", class: "btn btn-primary", data: { :disable_with => "Submitting..." } %>
<% end %>
</span>
</div>
<ul id="bottom_links">
<li><%= link_to "I Graduated High School. Now What?", "/i-graduated-high-school-now-what" %></li>
<li><%= link_to "How to Choose a College", "/how-to-choose-a-college" %></li>
<li><%= link_to "How College Inside View Got Started", "https://medium.com/what-i-learned-building/322e8668ed6f" %></li>
</ul>
JS
$('#columbia > a, #princeton > a, #brown > a, #penn > a, #harvard > a, #yale > a, #cornell > a, #dartmouth > a, #pitt > a, #wisconsin > a, #colgate > a, #adelphi > a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
CSS
@import "bootstrap";
@import "animations";
#home_css {
max-height: 1200px !important;
#the_deal {
float: right;
font-size: 12px;
}
#heading {
font-size: 42px;
clear: right;
margin-bottom: 15px;
}
.tab-content {
overflow: hidden;
.tab-pane {
.picture {
margin: 0px;
}
.school_link {
display: block;
text-align: center;
background-color: beige;
margin-top: -5px;
padding: 3px 0px;
margin-bottom: 20px;
}
.right {
float: right;
clear: both;
width: 490px;
height: 590px;
.question {
position: relative;
left: 15px;
}
.answers{
}
.read_more {
display: block;
position: relative;
left: 15px;
top: 10px;
}
}
}
}
#left {
float: left;
clear: left;
width: 380px;
padding-left: 0px;
position: relative;
bottom: 590px;
height: 590px;
}
#notify, #bottom_links {
position: relative;
bottom: 575px;
}
#notify {
clear: both;
background-color: aliceblue;
text-align: center;
padding: 30px 0px;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
p {
font-family: 'Arvo', serif;
}
#notify_span {
display: block;
margin-top: 25px;
form {
height: 44px;
}
input[type=email] {
width: 400px;
height: 35px;
font-family: monospace;
font-size: 20px;
position: relative;
right: 85px;
}
.btn-primary {
height: 43px;
width: 137px;
position: relative;
bottom: 85px;
left: 215px;
font-size: 16px;
}
}
}
#bottom_links {
list-style-type: none;
text-align: center;
margin-top: 10px;
margin-bottom: -1000px;
li {
display: inline;
margin-right: 60px;
font-size: 12px;
}
}
}
最佳答案
工作和不工作 div 之间的 html 结构是不同的。
<div class="tab-pane fade active in" id="columbia">
<%= image_tag "columbia1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "columbia2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "columbia3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Columbia • •".html_safe, "/columbia/academics/professors/1", class: 'school_link' %>
<div class="right">
<p class="question" class="well"><strong>How does the workload impact your social life?</strong></p>
<%= image_tag "columbia_social_atmosphere_7.png", class: 'answers' %>
<%= link_to '--read more--', '/columbia/social-life/social-atmosphere/7', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="princeton">
<%= image_tag "princeton1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "princeton2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "princeton3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Princeton • •".html_safe, "/princeton/academics/professors/1", class: 'school_link' %>
<div class="right">
<p class="question" class="well"><strong>How would you make your classes better?</strong></p>
<%= image_tag "princeton_classes_6.png", class: 'answers' %>
<%= link_to '--read more--', '/princeton/academics/classes/6', class: 'read_more' %>
</div>
</div>
<div class="tab-pane fade" id="brown">
<%= image_tag "brown1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "brown2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "brown3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Brown • •".html_safe, "/brown/academics/professors/1", class: 'school_link' %>
<div class="right">
<p class="question" class="well"><strong>Are people intellectual? Do they have thoughtful conversations with each other?</strong></p>
<%= image_tag "brown_social_atmosphere_5.png", class: 'answers' %>
<%= link_to '--read more--', '/brown/social-life/social-atmosphere/5', class: 'read_more' %>
</div>
</div>
以上是无效的。 下面是第一个这样做的。
<div class="tab-pane fade" id="penn">
<div class="left_pane">
<%= image_tag "university-of-pennsylvania1.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-pennsylvania2.jpg", size: "297x187", class: 'picture' %>
<%= image_tag "university-of-pennsylvania3.jpg", size: "297x187", class: 'picture' %>
<%= link_to "• • Read more about Penn • •".html_safe, "/university-of-pennsylvania/academics/professors/1", class: 'school_link' %>
</div>
<div class="right">
<p class="question" class="well"><strong>Are your classes too hard, or too easy? Why?</strong></p>
<%= image_tag "penn_dificulty_4.png", class: 'answers' %>
<%= link_to '--read more--', '/university-of-pennsylvania/academics/difficulty/4', class: 'read_more' %>
</div>
</div>
两者之间的快速比较告诉我，做工作的学院的结构是这样的
<div id="columbia">
<div class="left_pane" >
<a>relevant link</a>
</div>
<div class="right" >
</div>
</div>
虽然不起作用的部分结构如下
<div id="columbia">
<a>relevant link</a>
<div class="right" >
</div>
</div>
这种结构上的差异似乎会扰乱您页面上的某些 javascript 选择器。我在您发布的代码中没有看到任何会被这种结构差异搞乱的内容，但我认为这不是巧合...
即使您确实更改了结构以使用类而不是 id(我认为这是一个不错的选择)，弄清楚到底是什么因这种结构差异而被绊倒可能是个好主意，因为它可能会导致其他问题稍后再说。
关于javascript - 为什么这 3 个链接不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24171321/